Available from v7.3.0
BB.DataList
BB.DataList is a SwiftUI structured list view with standardized padding, backgrounds, and borders for displaying organized data.
Platform availability: iOS 17.0+
When to use:
- Use BB.DataList when presenting key-value pairs or structured information in a consistent format.
- Consider BB.Card when you need a container with more flexible content layout beyond simple label-value rows.
Import
import BackbaseDesignSystem
import SwiftUI
Visual reference
|
|
|
|
API reference
BB.DataList
A container view that displays structured list content with standardized styling.
Initializers
init(content:)
Initializes a new instance of the BB.DataList component.
|
Parameter |
Type |
Description |
|---|---|---|
|
content |
() -> Content |
A closure that returns the content to be displayed inside the DataList |
BB.DataListItem
A single row item within a data list that displays a leading title and either a trailing text value or a custom trailing slot view.
Initializers
init(title:slot:)
Initializes a DataListItem with a custom trailing slot view.
|
Parameter |
Type |
Description |
|---|---|---|
|
title |
String |
The leading label text or title of the row |
|
slot |
() -> some View |
A closure that returns a SwiftUI view to be displayed as the trailing slot |
init(title:value:appearance:)
Initializes a DataListItem with a trailing text value.
|
Parameter |
Type |
Description |
|---|---|---|
|
title |
String |
The leading label text or title of the row |
|
value |
String |
The trailing text value to be displayed |
|
appearance |
Appearance |
The appearance variant of the trailing value text (default: .default) |
Enumerations
BB.DataListItem.Appearance
Represents different visual styles for the trailing value text in DataListItem.
|
Case |
Description |
|---|---|
|
default |
The standard appearance for the value text |
|
bold |
A bold appearance for the value text |
UIKit wrappers
The same functionality is available within UIKit classes named DataList and DataListItem that wrap this SwiftUI implementation.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
content |
() -> Content |
— |
BB.DataListItem configuration
|
Property |
Type |
Default |
|---|---|---|
|
title |
String |
— |
|
value |
String |
— |
|
appearance |
Appearance |
.default |
title
The title property sets the leading label text for the row item.
BB.DataListItem(title: "Account Name", value: "Savings")
value
The value property sets the trailing text value to be displayed.
BB.DataListItem(title: "Balance", value: "$1,234.56")
appearance
The appearance property controls the visual style of the value text. Use .bold to emphasize important values.
BB.DataListItem(title: "Total", value: "$5,000.00", appearance: .bold)
slot
The slot parameter accepts a closure that returns a custom view for the trailing content.
BB.DataListItem(title: "Status") {
BB.Badge(text: "Active", appearance: .success)
}
Usage
Basic usage
Create a simple data list with text values.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.DataList {
BB.DataListItem(title: "Name", value: "John Doe")
BB.DataListItem(title: "Email", value: "john.doe@example.com")
BB.DataListItem(title: "Phone", value: "+1 234 567 8900")
}
}
}
Advanced usage
Create a data list with mixed content types and appearances.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.DataList {
BB.DataListItem(title: "Status") {
BB.Badge(text: "Processed", appearance: .success)
}
BB.DataListItem(title: "Account Number", value: "1234567890", appearance: .bold)
BB.DataListItem(title: "Balance", value: "$1,234.56", appearance: .bold)
BB.Separator()
BB.DataListItem(title: "Last Transaction", value: "2024-01-15")
BB.DataListItem(title: "Account Type", value: "Savings")
}
.padding()
}
}
States and variants
Default appearance
The default appearance uses standard weight for value text.
Visual characteristics:
- Regular font weight for value
- Standard foreground color
BB.DataListItem(title: "Account Type", value: "Checking")
Bold appearance
The bold appearance uses heavier weight for emphasized values.
Visual characteristics:
- Bold font weight for value
- Standard foreground color
BB.DataListItem(title: "Total", value: "$10,000.00", appearance: .bold)
Custom slot
Custom slots support any SwiftUI view as trailing content.
Visual characteristics:
- Custom view aligned to trailing edge
- Flexible content support
BB.DataListItem(title: "Status") {
BB.Badge(text: "Active", appearance: .success)
}
Customization
Using separators
Add visual separation between groups of items.
BB.DataList {
BB.DataListItem(title: "Name", value: "John Doe")
BB.DataListItem(title: "Email", value: "john@example.com")
BB.Separator()
BB.DataListItem(title: "Address", value: "123 Main St")
BB.DataListItem(title: "City", value: "New York")
}
Custom trailing content
Use the slot initializer for interactive or complex trailing content.
BB.DataList {
BB.DataListItem(title: "Notifications") {
Toggle("", isOn: $isEnabled)
}
BB.DataListItem(title: "Priority") {
HStack {
Image(systemName: "star.fill")
Text("High")
}
}
}
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.DataList()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
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
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.typography |
Text styling for titles and values |
|
Spacer |
DesignSystem.shared.spacer |
Padding and spacing within the list |
|
DataList Styles |
DesignSystem.shared.styles.dataList |
Pre-configured list and item styles |
|
Colors |
Theme.colors |
Background, border, and text colors |
Localization
The following strings are available for localization:
|
Key |
Default Value |
Description |
|---|---|---|
|
DesignSystem.dataListItem.accessibility.title |
"%@" |
Accessibility label format for title |
|
DesignSystem.dataListItem.accessibility.value |
"Value: %@" |
Accessibility label format for value |
To customize these strings, add the keys to your app's Localizable.strings file.