Account Group

<sl-account-group> | SlAccountGroup

Since 1.0

stable

Account group is a collection of tiles used for displaying client’s financial accounts.

Account group display account-tile and account-input. Each tab must be slotted into the nav slot and its panel must refer to a tab panel of the same name.

<sl-account-group>
  <sl-account-tile active
    account-name="Account name first"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
  >
  </sl-account-tile>
  <sl-account-tile active
    account-name="Account name second"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
    show-balance-warning
  >
  </sl-account-tile>
  <sl-account-tile
    account-name="Account name third"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
    account-status="Closed"
  >
  </sl-account-tile>
</sl-account-group>

Examples

Single account

<sl-account-group>
  <sl-account-tile active
    account-name="Account name first"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
  >
  </sl-account-tile>
</sl-account-group>

Multiple accounts

<sl-account-group>
  <sl-account-tile active
    account-name="Account name first"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
  >
  </sl-account-tile>
  <sl-account-tile active
    account-name="Account name second"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
  >
  </sl-account-tile>
  <sl-account-tile
    account-name="Account name third"
    account-number="2354542"
    account-product="HUB24 Super - CORE Menu"
    account-balance="$44,4444"
    account-status="Closed"
  >
  </sl-account-tile>
</sl-account-group>

[component-metadata:sl-account-group]

Slots

Name	Description
(default)	The Account group’s main content.
`icon`	An icon to show in the Account group. Works best with `<sl-icon>`.

Learn more about using slots.

Properties

Name	Description	Type	Default
`balanceHidden` `balance-hidden`	A boolean storing the client’s account balance state as hidden or visible from view	`boolean`	`false`
`selectedAccounts` `selected-accounts`	An array type attribute representing multiple selected accounts for the client	`string[]`	`[]`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.