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
StatusVariant is use to indicate the color and semantic meaning of the Status.
Modifier to be applied to the Status component.
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.
StatusSymbol is use to indicate the shape of the Status.
See also
Samples
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
)
}
}Status is typically used to highlight product availability but might work in other applications.
Parameters
label that will be shown along side the status.
StatusVariant is use to indicate shape and color of the Status.
Modifier to be applied to the Status.
StatusPosition determines whether the dot will be positioned in a leading or trailing position. StatusPosition.Leading is set as default.
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.
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.
StatusSymbol is use to indicate the shape of the Status.
See also
Samples
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
)
}
}