Xaui v0.9.1-beta.99

BetaData display

List

List virtualise une collection avec le FlatList de React Native. Il fournit la structure visuelle d'une ligne sans lui attribuer de comportement de sélection ou de pression.

Source Markdown

Overview

List virtualise une collection avec le FlatList de React Native. Il fournit la structure visuelle d'une ligne sans lui attribuer de comportement de sélection ou de pression.

First example

<List
  data={people}
  keyExtractor={person => person.id}
  renderItem={({ item }) => (
    <List.Item>
      <List.Leading>{item.avatar}</List.Leading>
      <List.Content>
        <List.Title>{item.name}</List.Title>
        <List.Description>{item.role}</List.Description>
      </List.Content>
      <List.Action>{item.action}</List.Action>
    </List.Item>
  )}
/>

Anatomy

<List>
  <List.Item>
    <List.Leading />
    <List.Content>
      <List.Title />
      <List.Description />
    </List.Content>
    <List.Action />
  </List.Item>
</List>

Usage

<List
  data={people}
  keyExtractor={person => person.id}
  renderItem={({ item }) => (
    <List.Item>
      <List.Leading>{item.avatar}</List.Leading>
      <List.Content>
        <List.Title>{item.name}</List.Title>
        <List.Description>{item.role}</List.Description>
      </List.Content>
      <List.Action>{item.action}</List.Action>
    </List.Item>
  )}
/>

Root props

ListProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
renderItem	`ListRenderItem<ItemT>`	Yes	Renders the compound row for one item.
asChild	`boolean \| undefined`	No	Merge the list props into a custom `FlatList`-compatible root.
children	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| undefined`	No	—

Slots

ListActionProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

ListContentProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

ListDescriptionProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

ListItemProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—
asChild	`boolean \| undefined`	No	—

ListLeadingProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

ListTitleProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

Variants, sizes and colour

Variants

List n'a pas de variant d'apparence : son fond reste celui de son parent et ses espacements proviennent du thème.

Accessibility

Le root est annoncé comme une liste. Chaque ligne conserve les propriétés d'accessibilité fournies à List.Item, et le contrôle placé dans Action conserve sa propre sémantique.

Migration from legacy

Contrairement à ListBuilder, la nouvelle API reçoit le contrat standard de FlatList et compose la ligne avec des slots. La sélection et la pression appartiennent au contrôle rendu par l'application, pas à la liste.