A container divided into groups of layout components with each group being visible upon user-selection
tabs {
tabs {
tab {
title = "Unpaid"
components {
decision {
options {
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:clock" } }
}
title = "Joe Bloggs"
description = "15 GBP"
behavior = ActionBehavior.build {
action {
url = "/pay"
}
}
}
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:clock" } }
}
title = "Mary Smith"
description = "20 EUR"
behavior = ActionBehavior.build {
action {
url = "/pay"
}
}
}
}
}
}
}
tab {
title = "Paid"
components {
decision {
options {
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:check" } }
}
title = "Jane Doe"
description = "10 GBP"
behavior = ActionBehavior.build {
action {
url = "/view"
}
}
}
}
}
}
}
}
}| Property | Type | Required | Description |
|---|---|---|---|
analyticsId | String | No | An optional identifier to be used in analytics tracking. |
control | String | No | Specify a particular control to use to represent the layout. If the control is unknown, it will be ignored. |
margin | Size | No | The vertical margin to apply after this component. Defaults to md. |
tabs | Array<TabsLayout.Tab> | Yes | The tabs to be selected |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
type | String | Yes | It must be 'tabs'. |
Represents a single Tab with a title and list of components
| Property | Type | Required | Description |
|---|---|---|---|
| String | No | An optional identifier to be used in analytics tracking.
|
components | Array<Layout> | Yes | The components to be displayed when this tab is selected. |
| String | No | An optional identifier to be used in custom renderers. ⚠️ Deprecated - Please use 'tags' instead |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
title | String | Yes | A user-facing title. |
chips
Displays the tab selection as a chip group.
tabs {
control = "chips"
tabs {
tab {
title = "Transactions"
components {
list {
title = "Today"
items {
item {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:KR" } }
}
title = "Soda Pop"
supportingValues {
value = "1,500 KWR"
}
}
item {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:confetti?=background=sentiment-warning" } }
}
title = "Saja Boys Album Vinyl"
supportingValues {
value = "3,500 KWR"
}
}
}
}
}
}
tab {
title = "Quick Options"
components {
decision {
control = "spotlight"
options {
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:upward-graph?=background-color=brand-bright-green&foreground-color=base-dark" } }
}
tag = "spotlight-active"
title = "Interest active"
description = "3.51% variable rate"
behavior = ActionBehavior.build {
action {
url = "/variable-rate"
}
}
}
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:auto-convert?=background-color=base-light" } }
}
title = "Auto conversions"
description = "Convert money between your currencies at your chosen rate."
behavior = ActionBehavior.build {
action {
url = "/auto-conversion"
}
}
}
}
}
}
}
}
}segmented
Displays the tab selection as a segmented control.
tabs {
control = Control.Layout.Tabs.SEGMENTED
tabs {
tab {
title = "Send"
components {
paragraph {
text = "Send money to over 80 countries worldwide."
}
}
}
tab {
title = "Receive"
components {
paragraph {
text = "Get paid in 10+ currencies with your account details."
}
}
}
}
}