Separators

Horizontal and vertical separators with caller-defined color and thickness.

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.composeunstyled.Text
import com.composeunstyled.UnstyledHorizontalSeparator
import com.composeunstyled.UnstyledVerticalSeparator
import com.composeunstyled.demo.borderToken
import com.composeunstyled.demo.colors
import com.composeunstyled.demo.inputBackgroundToken
import com.composeunstyled.demo.surfaceToken
import com.composeunstyled.theme.Theme

@Preview
@Composable
fun SeparatorsDemo() {
  BoxWithConstraints(
    modifier = Modifier
      .fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
    Column(
      Modifier
        .clip(RectangleShape)
        .background(Theme[colors][surfaceToken])
        .border(1.dp, Theme[colors][borderToken], RectangleShape)
        .width(240.dp),
    ) {
      Text(
        "New Window",
        modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Text("New Tab", Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp))
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Text(
        "New Incognito Tab",
        Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Row(Modifier.fillMaxWidth().height(IntrinsicSize.Min)) {
        Text(
          "Copy",
          modifier = Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
        UnstyledVerticalSeparator(Theme[colors][inputBackgroundToken])
        Text(
          "Cut",
          modifier = Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
        UnstyledVerticalSeparator(Theme[colors][inputBackgroundToken])
        Text(
          "Paste",
          Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
      }
    }
  }
}

Installation

implementation("com.composables:composeunstyled-separators:2.9.2")

Anatomy

UnstyledHorizontalSeparator(color = Color.Black)

UnstyledVerticalSeparator(color = Color.Black)

Concepts

UnstyledHorizontalSeparator renders a horizontal line.
UnstyledVerticalSeparator renders a vertical line.

Code Examples

Changing separator thickness

Use the thickness parameter to change the line thickness:

UnstyledHorizontalSeparator(
  color = Color.Black,
  thickness = 2.dp,
)

API Reference

UnstyledHorizontalSeparator

Parameter	Type	Description
`color`	`Color`	the `Color` of the separator.
`modifier`	`Modifier`	the `Modifier` to be used to this separator.
`thickness`	`Dp`	a `Dp` of how thick the separator should rendered.

UnstyledVerticalSeparator

Parameter	Type	Description
`color`	`Color`	the `Color` of the separator.
`modifier`	`Modifier`	the `Modifier` to be used to this separator.
`thickness`	`Dp`	a `Dp` of how thick the separator should rendered.