Status
Status is typically used to highlight product availability but might work in other applications.
Note: This is the stand-alone version without a label.
Parameters
variant
StatusVariant is use to indicate the color and semantic meaning of the Status.
modifier
Modifier to be applied to the Status component.
size
dictates the size of the Status component. When set as StatusSize.Small, the dot size will be 8.dp and shape will always be a filled circle.
See also
Samples
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Fill
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.max
import androidx.compose.ui.unit.sp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.alignComponentToFirstLineLabel
import net.ikea.skapa.ui.components.StatusSize.Proportional
import net.ikea.skapa.ui.components.StatusVariant.Available
import net.ikea.skapa.ui.components.StatusVariant.Indeterminate
import net.ikea.skapa.ui.components.StatusVariant.Low
import net.ikea.skapa.ui.components.StatusVariant.Unavailable
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
Status(variant = Low, size = StatusSize.Small)
Status(variant = Low, size = Proportional)
Status(label = "Indeterminate", variant = Indeterminate, fontSize = 34.sp, size = Proportional)
Status(label = "Indeterminate", variant = Indeterminate, size = Proportional)
Status(label = "Low Availability", variant = Low, size = Proportional)
Status(label = "Unavailable", variant = Unavailable, size = Proportional)
Status(label = "Available", variant = Available, size = StatusSize.Small)
Status(label = "Available", variant = Available, size = Proportional)
Status(
label = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
variant = Available,
indicatorPosition = StatusPosition.Trailing,
size = Proportional
)
}
}
//sampleEnd
}fun Status(label: String, variant: StatusVariant, modifier: Modifier = Modifier, indicatorPosition: StatusPosition = StatusPosition.Leading, fontSize: TextUnit = StatusProps.DefaultTextSize, size: StatusSize = Proportional)
Status is typically used to highlight product availability but might work in other applications.
Parameters
label
label that will be shown along side the status.
variant
StatusVariant is use to indicate shape and color of the Status.
modifier
Modifier to be applied to the Status.
indicatorPosition
StatusPosition determines whether the dot will be positioned in a leading or trailing position. StatusPosition.Leading is set as default.
fontSize
is use to determinate the text size and the size of the dot witch diameter is 40% the font size with a minimum of 12.dp.
size
dictates the size of the Status component. When set as StatusSize.Small, the dot size will be 8.dp and shape will always be a filled circle.
See also
Samples
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Fill
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.max
import androidx.compose.ui.unit.sp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.alignComponentToFirstLineLabel
import net.ikea.skapa.ui.components.StatusSize.Proportional
import net.ikea.skapa.ui.components.StatusVariant.Available
import net.ikea.skapa.ui.components.StatusVariant.Indeterminate
import net.ikea.skapa.ui.components.StatusVariant.Low
import net.ikea.skapa.ui.components.StatusVariant.Unavailable
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
Status(variant = Low, size = StatusSize.Small)
Status(variant = Low, size = Proportional)
Status(label = "Indeterminate", variant = Indeterminate, fontSize = 34.sp, size = Proportional)
Status(label = "Indeterminate", variant = Indeterminate, size = Proportional)
Status(label = "Low Availability", variant = Low, size = Proportional)
Status(label = "Unavailable", variant = Unavailable, size = Proportional)
Status(label = "Available", variant = Available, size = StatusSize.Small)
Status(label = "Available", variant = Available, size = Proportional)
Status(
label = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
variant = Available,
indicatorPosition = StatusPosition.Trailing,
size = Proportional
)
}
}
//sampleEnd
}