> ListItem

ListItem

Permet d’afficher les données d’une ressource. Il est recommandé d’utiliser les ListItem au sein d’une ResourceList plutôt que de manière isolée.

TagsuiInformationsFigmaExemples11StylesDisponibles

Default

TitreDescription

export const Default = () => (
  <ListItem
    title="Titre"
    description="Description"
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithTrailing

TitreDescription

export const WithTrailing = () => (
  <ListItem
    title="Titre"
    description="Description"
    trailing={() => <ButtonIcon variant="tertiary" icon="CircleX" onPress={() => console.log('remove')} />}
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithLoading

Le spinner remplace l'icône de trailing et s'affiche immédiatement (pas de délai) car le chargement porte sur l'item lui-même, pas sur une action utilisateur déclenchée par un bouton.

TitreDescription

export const WithLoading = () => (
  <ListItem
    title="Titre"
    description="Description"
    loading={true}
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithoutSeparator

TitreDescription

export const WithoutSeparator = () => (
  <ListItem
    title="Titre"
    description="Description"
    showSeparateur={false}
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithIcon

TitreDescription

export const WithIcon = () => (
  <ListItem
    title="Titre"
    description="Description"
    IconProps={{ name: 'Settings', color: 'primary' }}
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithAvatar

TitreDescription

export const WithAvatar = () => (
  <ListItem
    title="Titre"
    description="Description"
    AvatarProps={{
      fallbackText: 'Jean Pierre',
      src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
    }}
    onPress={() => {
      window.alert('click !');
    }}
  />
);

WithPreviewImage

TitreDescription

export const WithPreviewImage = () => (
  <ListItem
    title="Titre"
    description="Description"
    preview_url="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400"
    onPress={() => {
      window.alert('click !');
    }}
  />
);

ItemRadio

TitreDescription

export const ItemRadio = () => {
  const [value, setValue] = useState<string>();
  return (
    <ListItem
      title="Titre"
      description="Description"
      RadioProps={{
        value: 'tutu',
        checked: value === 'tutu',
        onChange: v => setValue(v),
      }}
    />
  );
};

ItemRadioMultiple

TitreDescription

export const ItemRadioMultiple = () => {
  const [value, setValue] = useState<string>();
  return (
    <ListItem
      title="Titre"
      description="Description"
      RadioProps={{
        value: 'tutu',
        checked: value === 'tutu',
        onChange: v => setValue(v),
        multiple: true,
      }}
    />
  );
};

ItemRadioWithIcon

TitreDescription

export const ItemRadioWithIcon = () => {
  const [value, setValue] = useState<string>();
  return (
    <ListItem
      title="Titre"
      description="Description"
      IconProps={{ name: 'Settings' }}
      RadioProps={{
        value: 'tutu',
        checked: value === 'tutu',
        onChange: v => setValue(v),
      }}
    />
  );
};

withoutHover

Sans prop onPress, l’effet de hover n’apparaît pas.

TitreDescription

export const withoutHover = () => <ListItem title="Titre" description="Description" />;

Alveole UI Kit — v1.8.4