Stylish
A grid of connected list items laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for settings dashboards or grouped navigation tiles.
This is the Finish-layer component: it supplies the Stylish list-item rendering (DefaultStylishConnectedListItem) to the headless Structure layout ConnectedListItemGrid, which owns arrangement and connection geometry. Items are chunked into rows of columns items; within each row every item receives equal weight and stretches to the tallest sibling. Outline edges are drawn on all four sides of every cell; corner radii are computed automatically from each item's absolute index so that only the four outer corners of the entire grid are rounded. Each item displays a headline, optional supporting text, additional supporting lines, and optional leading/trailing slot content. Items whose StylishConnectedListItem.onClick and StylishConnectedListItem.onLongClick are both null, or whose StylishConnectedListItem.enabled is false, are rendered without elevation and do not respond to interaction. Pass a custom listItem to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedListItem data objects that describe each cell's headline, supporting text, click/long-click actions, enabled state, and slot content.
The number of equal-width columns in the grid. Must be greater than zero.
The gap between adjacent items both horizontally and vertically. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
Maximum number of lines for the headline text. Defaults to Int.MAX_VALUE (unlimited).
The TextOverflow strategy for the headline when it exceeds headlineMaxLines. Defaults to TextOverflow.Ellipsis.
The TextStyle applied to each item's headline. Defaults to MaterialTheme.typography.titleMedium.
Maximum number of lines for supporting text and supporting lines. Defaults to Int.MAX_VALUE (unlimited).
The TextOverflow strategy for supporting text. Defaults to TextOverflow.Ellipsis.
The TextStyle applied to supporting text and supporting lines. Defaults to MaterialTheme.typography.bodyMedium.
The background color of each item surface. When null, defaults to MaterialTheme.stylishComponentColors.groupedContainer.
The content color of each item surface. When null, defaults to an enabled/disabled-aware color.
The horizontal padding inside each item. Defaults to 16 dp.
The vertical padding inside each item. Defaults to 14 dp.
The horizontal gap between the leading slot, text block, and trailing slot inside each item. Defaults to StylishTheme.dimensions.itemSpacing (8 dp).
The MutableInteractionSource forwarded to each actionable item to observe press/hover/focus interactions for the state layer. When null, each item remembers its own. Pass a shared source to observe group-level interaction, e.g. to trigger a state update from a parent.
A composable lambda that renders a single item. Receives the item data, a modifier (including weight and fill-max-height), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedListItem, dressed in the Stylish look with the text, color, padding, and spacing parameters above.