SushiDivider¶

A composable that displays a divider with various customizable styles.

SushiDivider provides visual separation between content sections using different line styles such as solid, dotted, dashed, and decorative patterns like zigzags. It supports both horizontal and vertical orientations as well as customizable colors and thicknesses.

Example¶

The SushiDivider component is used to create visual separation between content elements.

// Basic straight divider
SushiDivider(
    props = SushiDividerProps(
        type = SushiDividerType.Straight,
        color = SushiColorData(ColorName.Red, ColorVariation.Variation500)
    ),
    Modifier.fillMaxWidth().padding(vertical = 16.dp)
)

// Dotted divider
SushiDivider(
    props = SushiDividerProps(
        type = SushiDividerType.Dotted,
        color = SushiColorData(ColorName.Blue, ColorVariation.Variation500)
    ),
    Modifier.fillMaxWidth().padding(vertical = 16.dp)
)

// ZigZag pattern divider
SushiDivider(
    props = SushiDividerProps(
        type = SushiDividerType.ZigZag(
            direction = SushiDividerType.ZigZag.Direction.Top,
            radius = 2.dp,
            width = 24.dp,
            height = 12.dp
        ),
        color = SushiColorData(ColorName.Green, ColorVariation.Variation500),
    ),
    Modifier.fillMaxWidth().padding(vertical = 16.dp)
)

Component API¶

SushiDividerProps¶

Parameter	Description
`type`	The visual style of the divider (default is SushiDividerType.Straight)
`color`	The color of the divider (default is determined by theme)
`height`	The thickness of the divider (default varies by type)

SushiDividerType¶

The SushiDividerType defines different visual styles for dividers:

Type	Description
`Straight`	A standard solid straight line divider
`Dotted`	A dotted line divider with small, closely spaced dots
`Dashed`	A dashed line divider with small dashes and gaps
`StraightThick`	A solid straight line divider with a thicker stroke width
`DottedSpaced`	A dotted line divider with larger spacing between dots
`Vertical`	A vertical solid straight line divider
`VerticalDotted`	A vertical dotted line divider with small, closely spaced dots
`ZigZag`	A decorative zigzag pattern divider with configurable direction, radius, width, and height
`Pink`	A special pink-colored divider (project-specific)
`Menu`	A menu-style divider with a triangular notch (project-specific)