> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# List chrome
> Modifiers for styling List rows, separators, and overall appearance
export const PlatformStatuses = ({statuses}) => {
const StatusBadge = ({status, label}) => {
const styles = {
green: {
backgroundColor: '#dcfce7',
color: '#166534'
},
orange: {
backgroundColor: '#fed7aa',
color: '#9a3412'
},
red: {
backgroundColor: '#fecaca',
color: '#991b1b'
},
gray: {
backgroundColor: '#f3f4f6',
color: '#4b5563'
}
};
const baseStyle = {
display: 'inline-flex',
alignItems: 'center',
padding: '0.125rem 0.625rem',
borderRadius: '9999px',
fontSize: '0.875rem',
fontWeight: '500'
};
const colorStyle = styles[status] || styles.green;
return
{label || status}
;
};
const STATUS_CONFIG = {
supported: {
label: "Supported",
color: "green"
},
partial: {
label: "Partial",
color: "orange"
},
"not-implemented": {
label: "Not Implemented",
color: "gray"
}
};
const renderCard = (platform, value) => {
if (!value) return null;
const {status, note} = typeof value === "string" ? {
status: value
} : value;
const config = STATUS_CONFIG[status];
if (!config) return null;
const titleMap = {
ios: "SwiftUI",
android: "Jetpack Compose",
web: "Web"
};
return
{note &&
{note}
}
;
};
if (statuses == null) {
return null;
}
return
{Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
;
};
export const ComposeJS = ({code, name, height}) => {
const encodedCode = useMemo(() => {
if (!code) return "";
try {
return btoa(code);
} catch (e) {
console.error("Failed to encode code", e);
return "";
}
}, [code]);
if (!encodedCode) {
return null;
}
return ;
};
These iOS-only modifiers style a [List](/bindjs/components/List) and its rows. `listStyle` sets the overall list appearance; `listRowBackground` and `listRowSeparator` adjust individual row chrome.
`listStyle` is applied to the `List` itself; the row modifiers are applied to each item inside the list, not to the list container.
## listStyle
Sets the visual style of a `List`.
```typescript theme={null}
.listStyle(style: "automatic" | "plain" | "insetGrouped" | "grouped" | "inset" | "sidebar"): Component
```
The list style to apply:
* `"automatic"` -- the platform default style
* `"plain"` -- a plain list with no section styling
* `"insetGrouped"` -- grouped sections with inset rounded corners (default on iOS)
* `"grouped"` -- grouped sections with full-width backgrounds
* `"inset"` -- plain list with inset margins
* `"sidebar"` -- optimized for sidebar navigation
**Plain list**
```typescript theme={null}
List([
ForEach(items, (item) =>
Text(item.name)
)
]).listStyle("plain")
```
**Grouped list with sections**
```typescript theme={null}
List([
Section("Fruits", [
Text("Apple"),
Text("Banana"),
Text("Cherry")
]),
Section("Vegetables", [
Text("Carrot"),
Text("Broccoli")
])
]).listStyle("insetGrouped")
```
**Sidebar style**
```typescript theme={null}
List([
ForEach(menuItems, (item) =>
Label(item.title, item.icon)
)
]).listStyle("sidebar")
```
## listRowBackground
Sets the background view for a list row.
```typescript theme={null}
.listRowBackground(content: Component): Component
```
The component to display as the row's background.
**Colored row background**
Apply to content inside a [List](/bindjs/components/List)'s ForEach.
```typescript theme={null}
List([
ForEach(items, (item) =>
Text(item.name)
.listRowBackground(Color("blue").opacity(0.1))
)
])
```
**Alternating row backgrounds**
```typescript theme={null}
List([
ForEach(items, (item, index) =>
Text(item.name)
.listRowBackground(
index % 2 === 0
? Color("gray").opacity(0.1)
: Color("white")
)
)
])
```
This modifier should be applied to the content views inside a `List`, not to the `List` itself. The background fills the entire row area, including under any separators.
## listRowSeparator
Controls the visibility of list row separators.
```typescript theme={null}
.listRowSeparator(visibility: "hidden" | "visible"): Component
```
Whether the separator line below this row is visible or hidden.
**Hiding separators**
```typescript theme={null}
List([
ForEach(items, (item) =>
Text(item.name)
.listRowSeparator("hidden")
)
])
```
**Selectively hiding separators**
```typescript theme={null}
List([
ForEach(items, (item, index) =>
Text(item.name)
.listRowSeparator(
index === items.length - 1
? "hidden"
: "visible"
)
)
])
```
## See also
* [List](/bindjs/components/List) — the list container component
* [Scroll chrome](/bindjs/modifiers/scroll-chrome) — `scrollContentBackground` and other scroll-level modifiers
* [Section](/bindjs/components/Section) — group rows with header and footer