ListRow

이 콘텐츠는 아직 번역되지 않았습니다.

One line of a list or a settings screen.

The frame above shows the real web components, in the mode this site is in.

The design preview shows it next to every other web component.

When to use it

Separate rows with a Divider, inside a flush Card.
onPress makes the whole row a button. Do not put another control in trailing then.

Example

import { Avatar, ListRow } from "@acme/ui";

<ListRow
  title="Ada Lovelace"
  description="ada@example.com"
  leading={<Avatar name="Ada Lovelace" />}
  chevron
  onPress={open}
/>

Options

The web component’s props. The other platforms take the same options under their own naming conventions.

Prop	Type	Notes
`title`	`string`	Required.
`description`	`string`
`leading`	`ReactNode`	In front of the title: an avatar or an icon.
`trailing`	`ReactNode`	At the far end: a value, a badge or a switch.
`chevron`	`boolean`	For a row that leads somewhere else.
`onPress`	`() => void`	Makes the whole row a button.
`disabled`	`boolean`

Source

Platform	File
Web (React)	`packages/ui/src/ListRow.tsx`
Desktop (GPUI)	`crates/acme-ui/src/controls.rs`
React Native	`packages/ui-native/src/ListRow.tsx`
Compose Multiplatform	`kotlin/ui/src/commonMain/kotlin/acme/ui/ListRow.kt`