> ResourceList

ResourceList

Permet d’afficher une liste d'items avec un header et un footer

TagsuiInformationsFigmaExemples7StylesDisponibles

Default

export const Default = () => (
  <ResourceList
    data={exampleData}
    keyExtractor={item => item.id}
    renderItem={({ item, index }) => (
      <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />
    )}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

WithTitle

Titre de la liste

export const WithTitle = () => (
  <ResourceList
    titre="Titre de la liste"
    data={exampleData}
    keyExtractor={item => item.id}
    renderItem={({ item, index }) => (
      <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />
    )}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

WithIcon

export const WithIcon = () => (
  <ResourceList
    data={exampleData}
    keyExtractor={item => item.id}
    renderItem={({ item, index }) => (
      <ListItem
        title={item.name}
        description={item.description}
        IconProps={{ name: 'Settings' }}
        showSeparateur={index !== 0}
      />
    )}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

WithPreviewImageAndTrailing

export const WithPreviewImageAndTrailing = () => (
  <ResourceList
    data={exampleDataWithPreview}
    keyExtractor={item => item.id}
    renderItem={({ item, index }) => (
      <ListItem
        title={item.name}
        description={item.description}
        preview_url={item.preview_url}
        trailing={() => <LucideIcon name="ChevronRight" size="sm" />}
        showSeparateur={index !== 0}
      />
    )}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

IsLoading

Quand isLoading est true, la liste entière est remplacée par un spinner centré. Aucun délai n'est appliqué ici : le chargement initial d'une liste vide n'a rien à afficher, le spinner apparaît donc immédiatement pour éviter un écran blanc sans feedback.

export const IsLoading = () => (
  <ResourceList
    data={[] as typeof exampleData}
    isLoading={true}
    keyExtractor={item => item.id}
    renderItem={() => null}
    renderNoContent={() => null}
  />
);

WithNoContent

Aucun élémentCliquez sur le bouton

export const WithNoContent = () => (
  <ResourceList
    data={[] as typeof exampleData}
    keyExtractor={item => item.id}
    renderItem={({ item }) => <ListItem title={item.name} description={item.description} />}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

WithDivider

export const WithDivider = () => (
  <ResourceList
    data={exampleData}
    keyExtractor={item => item.id}
    renderItem={({ item, index }) => (
      <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />
    )}
    ItemSeparatorComponent={ResourceListDivider}
    renderNoContent={() => <EmptyState title="Aucun élément" description="Cliquez sur le bouton" iconName="House" />}
  />
);

Alveole UI Kit — v1.8.4