Line

The Line components provide horizontal and vertical dashed lines for visual separation and layout structure. They support customizable dash patterns, colors, and thickness.

Usage

Basic Horizontal Dashed Line

HorizontalDashedLine(
    modifier = Modifier.fillMaxWidth()
)

Horizontal Line with Custom Color

HorizontalDashedLine(
    modifier = Modifier.fillMaxWidth(),
    colors = LineDefaults.lineColors(
        strokeColor = MaterialTheme.colorScheme.primary
    )
)

Horizontal Line with Custom Dash Pattern

HorizontalDashedLine(
    modifier = Modifier.fillMaxWidth(),
    colors = LineDefaults.lineColors(
        strokeColor = Color.Red
    ),
    sizes = LineDefaults.lineSizes(
        dashOn = 8.dp,
        dashOff = 4.dp,
        thickness = 2.dp
    )
)

Vertical Dashed Line

Row(modifier = Modifier.height(100.dp)) {
    Text("Left Content")

    VerticalDashedLine(
        modifier = Modifier.padding(horizontal = 8.dp),
        colors = LineDefaults.lineColors(
            strokeColor = MaterialTheme.colorScheme.outline
        )
    )

    Text("Right Content")
}

Thick Vertical Line

VerticalDashedLine(
    modifier = Modifier.height(50.dp),
    colors = LineDefaults.lineColors(
        strokeColor = Color.Blue
    ),
    sizes = LineDefaults.lineSizes(
        dashOn = 6.dp,
        dashOff = 3.dp,
        thickness = 4.dp
    )
)

Fine Dotted Line

HorizontalDashedLine(
    modifier = Modifier.fillMaxWidth(),
    colors = LineDefaults.lineColors(
        strokeColor = MaterialTheme.colorScheme.onSurfaceVariant
    ),
    sizes = LineDefaults.lineSizes(
        dashOn = 2.dp,
        dashOff = 2.dp,
        thickness = 1.dp
    )
)