spark/com.adevinta.spark.components.divider

Package-level declarations

Dividers The Divider component provides a thin, unobtrusive line that separates and distinguishes sections of content to reinforce visual hierarchy. A few common uses are: Separating sections on a page. Creating a visual contrast between 2 sides of a page.

Dividers are typically placed throughout your UI in places like:

Lists
Forms
Cards
Toolbars
Dialogs


Light
Dark

Horizontal Divider

Column {
    Title()
    HorizontalDivider()
    Description()
}

Horizontal Divider with Label

HorizontalDivider(
    intent = DividerIntent.Outline, 
    label = "Label", 
    labelHorizontalAlignment = LabelHorizontalAlignment.Center
)

Vertical Divider

Row {
    VerticalDivider()
}

Vertical Divider with Label

VerticalDivider(
    intent = DividerIntent.OutlineHigh,
    label = "Label",
    labelVerticalAlignment = LabelVerticalAlignment.Center
)

Types

DividerIntent

enum DividerIntent : Enum<DividerIntent>

Intent on the divider that will affect the background of the divider line. Use OutlineHigh to get a higher contrast if needed.

LabelHorizontalAlignment

enum LabelHorizontalAlignment : Enum<LabelHorizontalAlignment>

LabelHorizontalAlignment is used to define the horizontal alignment of the label in the divider. Alignment can be visible when Label is activated

LabelVerticalAlignment

enum LabelVerticalAlignment : Enum<LabelVerticalAlignment>

LabelVerticalAlignment is used to define the vertical alignment of the label in the divider. Alignment can be visible when Label is activated

Functions

HorizontalDivider

@Composable

fun HorizontalDivider(modifier: Modifier = Modifier, intent: DividerIntent = DividerIntent.Outline, labelHorizontalAlignment: LabelHorizontalAlignment = LabelHorizontalAlignment.Center, label: @Composable BoxScope.() -> Unit? = null)

HorizontalDivider Component. A divider is a thin line that groups content in lists and layouts.

VerticalDivider

@Composable

fun VerticalDivider(modifier: Modifier = Modifier, intent: DividerIntent = DividerIntent.Outline, labelVerticalAlignment: LabelVerticalAlignment = LabelVerticalAlignment.Center, label: @Composable BoxScope.() -> Unit? = null)

VerticalDivider Component. A divider is a thin line that groups content in lists and layouts.