Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable $bg_light).
PBSectionSeparator()
PBSectionSeparator(variant: .dashed)
PBSectionSeparator("Text separator")
let loremIpsum: some View = Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
)
HStack(spacing: Spacing.none) {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
PBSectionSeparator(orientation: .vertical)
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
}
.frame(maxWidth: .infinity)
.frame(height: 120, alignment: .center)
.listRowSeparator(.hidden)
PBSectionSeparator(variant: .dashed) {
PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
Text("Today")
.pbFont(.caption)
.frame(maxWidth: .infinity, alignment: .center)
}
}
| Name | Type | Description | Default | Values |
|---|---|---|---|---|
| text | String |
Adds text to the Section Separator | nil |
|
| orientation | Orientation |
Changes the orientation | .horizontal |
.horizontal .vertical |
| variant | Variant |
Changes the style of the Section Separator | .card |
.dashed .card |
| dividerOpacity | CGFloat |
Adjusts the opacity of the divider | 1 |
|
| margin | CGFloat |
Adds margin between text and the divider | Spacing.xSmall |
Spacing.none Spacing.xxSmall Spacing.xSmall Spacing.small Spacing.medium Spacing.large Spacing.xLarge |
