Jenga/io.github.joelkanyi.jenga.component.list/JengaKeyValueRow

JengaKeyValueRow

fun JengaKeyValueRow(label: String, value: String, modifier: Modifier = Modifier, valueStyle: TextStyle = JengaKeyValueRowDefaults.valueStyle, valueTone: JengaBadgeTone? = null, emphasis: JengaKeyValueEmphasis = JengaKeyValueEmphasis.Default, trailingContent: @Composable () -> Unit? = null, onClick: () -> Unit? = null, valueMaxLines: Int = Int.MAX_VALUE, valueMaxWidthFraction: Float = JengaKeyValueRowDefaults.ValueMaxWidthFraction, minHeight: Dp = JengaTheme.components.keyValueRow?.minHeight ?: JengaKeyValueRowDefaults.MinHeight, contentPadding: PaddingValues = JengaKeyValueRowDefaults.contentPadding, colors: JengaKeyValueRowColors = JengaKeyValueRowDefaults.colors(emphasis, valueTone), labelStyle: TextStyle = JengaKeyValueRowDefaults.labelStyle)(source)

A label and its value on one row: the label at the start, the value aligned to the end, taking up to valueMaxWidthFraction of the row and wrapping up to valueMaxLines lines before it is truncated with an ellipsis. Stack these for detail and summary sections (serial numbers, dates, amounts). Place a io.github.joelkanyi.jenga.component.divider.JengaDivider above a total row to set it apart.

Parameters

label

the key text.

value

the value text.

modifier

the Modifier for this row.

valueStyle

the value's TextStyle; pass JengaTheme.typography.mono for codes.

valueTone

optional tone that colors the value (e.g. success for "Paid").

emphasis

the row's weight; see JengaKeyValueEmphasis.

trailingContent

optional end slot after the value (e.g. a copy button).

onClick

optional click handler; makes the whole row clickable.

valueMaxLines

the maximum lines for value before it is truncated.

valueMaxWidthFraction

the largest share of the row width the value may take.

minHeight

the minimum row height; defaults to the theme's JengaKeyValueRowStyle.minHeight, else JengaKeyValueRowDefaults.MinHeight.

contentPadding

inner padding around the label and value.

colors

the color set; defaults to JengaKeyValueRowDefaults.colors.

labelStyle

the label's TextStyle.

Samples

Column(
    content = {
        JengaKeyValueRow(
            label = "Serial number",
            value = "SN-0042-7781",
            valueStyle = JengaTheme.typography.mono,
        )
        JengaDivider()
        JengaKeyValueRow(
            label = "Total",
            value = "KES 12,450",
            emphasis = JengaKeyValueEmphasis.Total,
        )
    },
)