Divider
Divider is a thin grey keyline that help create subsections of content.
Wraps a androidx.compose.material3.HorizontalDivider and androidx.compose.material3.VerticalDivider with the Skapa recommended colour.
Dividers should be used when the interface and information presented would benefit from visual grouping, and never as a decorative element. Only use dividers in contexts where whitespace is not enough to create separation.
See also
Samples
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.Orientation
fun main() {
//sampleStart
SkapaTheme2 {
Column {
SquareBox {
Divider(
modifier = Modifier
.padding(all = SkapaSpacing.space100)
.align(Alignment.Center),
orientation = Orientation.Horizontal
)
}
SquareBox {
Divider(
modifier = Modifier
.padding(all = SkapaSpacing.space100)
.align(Alignment.Center),
orientation = Orientation.Vertical
)
}
}
}
//sampleEnd
}Divider is a thin grey keyline that help create subsections of content.
Wraps a androidx.compose.material3.HorizontalDivider and androidx.compose.material3.VerticalDivider with the Skapa recommended colour.
Dividers should be used when the interface and information presented would benefit from visual grouping, and never as a decorative element. Only use dividers in contexts where whitespace is not enough to create separation.
Parameters
Modifier to be applied to the Divider
Orientation of the Divider
See also
Samples
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.Orientation
fun main() {
//sampleStart
SkapaTheme2 {
Column {
SquareBox {
Divider(
modifier = Modifier
.padding(all = SkapaSpacing.space100)
.align(Alignment.Center),
orientation = Orientation.Horizontal
)
}
SquareBox {
Divider(
modifier = Modifier
.padding(all = SkapaSpacing.space100)
.align(Alignment.Center),
orientation = Orientation.Vertical
)
}
}
}
//sampleEnd
}