Available from v1.3.0
SummaryStackView
SummaryStackView is a UIStackView extension that displays a set of data items vertically with a row-based API for pre-styled text, icon, and generic view rows.
Platform availability: iOS 17.0+
When to use:
- Use SummaryStackView when displaying a vertical list of labeled data items, such as transaction details or confirmation screens.
- Consider custom implementation when you need more complex layouts or horizontal arrangements.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
API reference
SummaryStackView
Properties
|
Property |
Type |
Description |
|---|---|---|
|
rows |
[SummaryStackRow] |
The rows array contains the items to display in the stack view. |
Initializers
- init(style:)
- Initializes a SummaryStackView with the given style.
|
Parameter |
Type |
Description |
|---|---|---|
|
style |
Style<SummaryStackView> |
Style to apply. Defaults to DesignSystem.shared.styles.summaryStackView |
SummaryStackRow
A protocol for creating rows in SummaryStackView.
|
Property |
Type |
Description |
|---|---|---|
|
customSpacingAfter |
CGFloat? |
The customSpacingAfter specifies spacing to add after this row. |
SummaryStackTextRow
A text row view with a UILabel.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
textLabel |
UILabel |
The textLabel displays the row text content. |
|
customSpacingAfter |
CGFloat? |
The customSpacingAfter specifies spacing to add after this row. |
Initializers
- init(primaryTextRow:customSpacingAfter:)
- Creates a text row with primary style.
- init(secondaryTextRow:customSpacingAfter:)
- Creates a text row with secondary style.
- init(amount:amountTextRow:formattingOptions:textStyle:customSpacingAfter:)
- Creates a text row with formatted amount.
- init(textRow:textStyle:customSpacingAfter:)
- Creates a text row with custom style.
- init(textRow:textStyle:customSpacingAfter:maxWidth:)
- Creates a text row with custom style and maximum width.
SummaryStackIconRow
An icon row view with an IconView component.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
imageView |
UIImageView |
The imageView displays the row icon. |
|
customSpacingAfter |
CGFloat? |
The customSpacingAfter specifies spacing to add after this row. |
Initializers
- init(_:iconViewStyle:iconSize:customSpacingAfter:)
- Creates an icon row with custom style and size.
|
Parameter |
Type |
Description |
|---|---|---|
|
image |
UIImage |
Image to display |
|
iconViewStyle |
Style<IconView> |
Icon view style. Defaults to iconViewWithBackground |
|
iconSize |
CGSize |
Size of the icon |
|
customSpacingAfter |
CGFloat? |
Custom spacing after this row |
SummaryStackGenericViewRow
A generic view row for custom content.
Initializers
- init(with:size:radius:customSpacingAfter:)
- Creates a generic view row with specified size.
|
Parameter |
Type |
Description |
|---|---|---|
|
view |
UIView |
The view to present |
|
size |
CGSize |
Size of the view |
|
radius |
CornerRadiusTypes |
Corner radius. Defaults to .max() |
|
customSpacingAfter |
CGFloat? |
Custom spacing after this row |
- init(with:radius:customSpacingAfter:)
- Creates a generic view row without specified size.
Configuration
|
Property |
Default |
|---|---|
|
style |
DesignSystem.shared.styles.summaryStackView |
|
Axis |
Vertical |
|
Alignment |
Center |
|
Distribution |
Fill |
Usage
Basic usage
Create a summary stack with text rows:
let summaryStack = SummaryStackView()
summaryStack.rows = [
SummaryStackTextRow(primaryTextRow: "Primary Text"),
SummaryStackTextRow(secondaryTextRow: "Secondary Text")
]
With custom spacing
Add custom spacing between rows:
let summaryStack = SummaryStackView()
summaryStack.rows = [
SummaryStackTextRow(primaryTextRow: "Title", customSpacingAfter: 8),
SummaryStackTextRow(secondaryTextRow: "Subtitle", customSpacingAfter: 16),
SummaryStackTextRow(primaryTextRow: "Another section")
]
With icon row
Add an icon row with the icon background style:
let iconRow = SummaryStackIconRow(
UIImage(named: "icon")!,
iconViewStyle: DesignSystem.shared.styles.iconViewWithBackground,
iconSize: CGSize(width: 48, height: 48),
customSpacingAfter: 16
)
let summaryStack = SummaryStackView()
summaryStack.rows = [
iconRow,
SummaryStackTextRow(primaryTextRow: "Title"),
SummaryStackTextRow(secondaryTextRow: "Description")
]
With amount formatting
Display a formatted amount:
let amountRow = SummaryStackTextRow(
amount: 1234.56,
amountTextRow: "Balance: %@",
formattingOptions: DesignSystem.Formatting.Options(),
textStyle: DesignSystem.shared.styles.summaryStackViewAmountLabel,
customSpacingAfter: 8
)
With generic view
Add a custom view:
let customView = UIView()
customView.backgroundColor = .systemBlue
let genericRow = SummaryStackGenericViewRow(
with: customView,
size: CGSize(width: 100, height: 50),
radius: .fixed(8),
customSpacingAfter: 16
)
let summaryStack = SummaryStackView()
summaryStack.rows = [genericRow]
States and variants
The SummaryStackView supports three row types:
|
Row type |
Class |
Description |
|---|---|---|
|
Text |
SummaryStackTextRow |
Displays text with primary, secondary, amount, or default styling |
|
Icon |
SummaryStackIconRow |
Displays an icon with background styling |
|
Generic |
SummaryStackGenericViewRow |
Displays any custom UIView |
Text rows support four pre-defined styles:
|
Style |
Initializer |
|---|---|
|
Primary |
init(primaryTextRow:customSpacingAfter:) |
|
Secondary |
init(secondaryTextRow:customSpacingAfter:) |
|
Amount |
init(amount:amountTextRow:formattingOptions:textStyle:customSpacingAfter:) |
|
Default |
init(textRow:textStyle:customSpacingAfter:) |
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.summaryStackView |
Default summary stack view style |
|
DesignSystem.shared.styles.summaryStackViewPrimaryLabel |
Primary text row style |
|
DesignSystem.shared.styles.summaryStackViewSecondaryLabel |
Secondary text row style |
|
DesignSystem.shared.styles.summaryStackViewAmountLabel |
Amount text row style |
|
DesignSystem.shared.styles.summaryStackViewDefaultLabel |
Default text row style |
Global properties
The following global settings affect the SummaryStackView style:
|
Property |
Description |
|---|---|
|
design.spacer.xxs |
Default space between rows when customSpacingAfter is not provided |
|
design.colors.text.default |
Text color of primary and amount styled labels |
|
design.colors.text.support |
Text color of secondary styled labels |
Custom row styles
Create custom text row styles:
let customStyle: Style<UILabel> = { label in
label.font = DesignSystem.shared.fonts.preferredFont(.headline, .semibold)
label.textColor = Theme.colors.foreground.brand
}
let customRow = SummaryStackTextRow(
textRow: "Custom styled text",
textStyle: customStyle
)
Accessibility
The SummaryStackView component is accessible by default with VoiceOver support.
|
Element |
Accessibility behavior |
|---|---|
|
Text rows |
Announced as static text |
|
Icon rows |
Decorative, not announced by default |
|
Generic rows |
Accessibility depends on embedded view |
Best practices:
- Each text row's label supports VoiceOver announcements
- The component adjusts font sizes for Dynamic Type automatically
- Use the vertical axis only; horizontal axis is not supported
Dependencies
- External dependencies: None
- Internal dependencies:
- IconView: Used for icon rows
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.foreground.default |
Primary and amount text color |
|
Colors |
Theme.colors.foreground.support |
Secondary text color |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Default text font |
|
Spacing |
DesignSystem.shared.spacer.sm |
Row spacing |
|
Spacing |
DesignSystem.shared.spacer.xxs |
Default space between rows |
|
Styles |
DesignSystem.shared.styles.summaryStackView |
Default summary stack view style |
|
Styles |
DesignSystem.shared.styles.summaryStackViewPrimaryLabel |
Primary text row style |
|
Styles |
DesignSystem.shared.styles.summaryStackViewSecondaryLabel |
Secondary text row style |
|
Styles |
DesignSystem.shared.styles.summaryStackViewAmountLabel |
Amount text row style |
See also