Separators - Compose Unstyled

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.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
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.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.composeunstyled.UnstyledHorizontalSeparator
import com.composeunstyled.UnstyledVerticalSeparator

@Composable
fun SeparatorsDemo() {
  BoxWithConstraints(
    modifier = Modifier
      .fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
    Column(
      Modifier
        .clip(RoundedCornerShape(6.dp))
        .background(Color(0xFFF8FAFC))
        .border(1.dp, Color(0xFFCACACA), RoundedCornerShape(6.dp))
        .width(240.dp),
    ) {
      BasicText(
        "New Window",
        modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Color.LightGray)
      BasicText("New Tab", Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp))
      UnstyledHorizontalSeparator(Color.LightGray)
      BasicText(
        "New Incognito Tab",
        Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Color.LightGray)
      Row(Modifier.fillMaxWidth().height(IntrinsicSize.Min)) {
        BasicText(
          "Copy",
          modifier = Modifier.padding(8.dp).weight(1f),
          style = TextStyle(textAlign = TextAlign.Center),
        )
        UnstyledVerticalSeparator(Color.LightGray)
        BasicText(
          "Cut",
          modifier = Modifier.padding(8.dp).weight(1f),
          style = TextStyle(textAlign = TextAlign.Center),
        )
        UnstyledVerticalSeparator(Color.LightGray)
        BasicText(
          "Paste",
          Modifier.padding(8.dp).weight(1f),
          style = TextStyle(textAlign = TextAlign.Center),
        )
      }
    }
  }
}

Show codeHide Code

Installation

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

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.