Status and Info Labels¶
The FioriStatusInfoLabel is a composable layout used to display a group of labels with highlighted information in a row-base or column-based layout.
Status and Info Label¶
Labels are used to display highlighted information. It can contain a text with or without a leading/trailing icon. A label can also use colors to represent different states of the information. Examples of labels are:
Row and Vertical-Stacked Layouts¶
The FioriStatusInfoLabel supports two different layouts:
- Row: the row-based layout can be a single row only or can wrap to the next line(s). Apps can set the maximum number of lines if the row allows wrapping. The labels can be separated with a middle dot or a blank space.
- Vertical-stacked: the vertical-stacked layout contains one label per line. Apps can set the alignment via overriding
FioriLabelStyles.
How to Create a FioriStatusInfoLabel¶
FioriStatusInfoLabel is a composable function that takes the following parameters:
@Composable
fun FioriStatusInfoLabel(
data: FioriStatusInfoLabelData,
colors: FioriLabelColors = FioriLabelDefaults.colors(),
textStyles: FioriLabelTextStyles = FioriLabelDefaults.textStyles(),
styles: FioriLabelStyles = FioriLabelDefaults.styles(),
nowrap: Boolean = true,
maxLines: Int = 2,
modifier: Modifier = Modifier,
) {
...
}
By default, if a label is row-based, it can not wrap. To make the row wrap to subsequent line(s), set nowrap to false. If the row can wrap, the default maximum number of lines is 2, which can be overridden.
To create your own status and info label, simply create an object of FioriStatusInfoLabelData and call FioriStatusInfoLabel. For example:
FioriStatusInfoLabel(
data = FioriStatusInfoLabelData(
items = listOf(
FioriLabelItemData(
label = "Success",
iconType = FioriLabelIconType.ICON,
icon = FioriIcon(
resId = R.drawable.ic_sap_icon_upload_to_cloud,
contentDescription = "uploaded to cloud",
),
color = FioriSemanticColors.POSITIVE,
),
FioriLabelItemData(
label = "5 Documents",
),
FioriLabelItemData(
label = "Confidential",
iconType = FioriLabelIconType.ICON,
icon = FioriIcon(
resId = R.drawable.ic_sap_icon_locked,
contentDescription = "locked",
),
color = FioriSemanticColors.INFORMATIVE,
),
FioriLabelItemData(
label = "High Risk",
iconType = FioriLabelIconType.ICON,
icon = FioriIcon(
resId = R.drawable.ic_sap_icon_message_warning,
contentDescription = "warning",
),
color = FioriSemanticColors.NEGATIVE,
),
),
hasSeparator = true
)
)