Petits éléments · Hodi SDK

Les petits éléments qui accompagnent une ligne ou un titre : une puce, un filtre, l'avatar d'une source ou d'un foyer. Comme les légendes et les métadonnées de Hodi, les puces sont écrites en police mono.

Chip

Une petite capsule de texte, pour une information courte comme une langue, un état ou une durée.

import { Chip } from 'hodi:sdk'

<Chip tone="success">Actif</Chip>

Props? : facultatif

childrenReactNode

Le texte de la puce, en quelques mots.

tone?'success' | 'warning' | 'danger' | 'accent'

La couleur de la puce : neutre par défaut, verte, jaune, rouge ou dans la couleur d'accent.

size?'capsule' | 'row'

La taille de la puce : capsule par défaut, row au bout d'une ligne de réglage.

title?string

Ce que veut dire la puce, affiché au survol.

label?string

Un nom plus complet que le texte, pour les lecteurs d'écran.

FilterChip

Un filtre dans une rangée de filtres. C'est une pilule, qui devient blanche quand elle est choisie.

import { FilterChip } from 'hodi:sdk'

<FilterChip
  selected={filter === 'all'}
  count={12}
  onClick={() => setFilter('all')}
>
  Tout
</FilterChip>

Props? : facultatif

selectedboolean

true quand le filtre est choisi.

childrenReactNode

Le texte du filtre.

onClick?() => void

Ce que fait un clic, pour un filtre qui change la page sans la quitter.

href?string

L'adresse à ouvrir, pour un filtre qui mène à une autre page.

count?number

Le nombre d'éléments que le filtre garde, affiché après le texte.

icon?LucideIcon

Une icône Lucide, affichée avant le texte.

disabled?boolean

Le filtre est grisé et ne se choisit pas.

SourceAvatar

L'icône d'une source, prise sur son site, ou ses initiales quand le site n'en a pas. Elle n'est jamais ronde : le rond est réservé aux personnes et aux foyers.

import { SourceAvatar } from 'hodi:sdk'

<SourceAvatar
  sourceId={article.sourceId}
  sourceName="Le Monde"
  size={44}
/>

Props? : facultatif

sourceIdstring

L'id de la source, tel qu'un article le donne.

sourceNamestring

Le nom de la source, dont l'avatar prend les initiales quand il n'a pas d'icône.

size?18 | 20 | 22 | 26 | 44

La taille de l'avatar, en px. Elle vaut 18 par défaut.

HouseholdAvatar

La photo d'un foyer, ou son initiale quand il n'a pas de photo. Elle est ronde, comme un profil sur l'écran Qui lit ?.

import { HouseholdAvatar } from 'hodi:sdk'

<HouseholdAvatar
  name="Dupont"
  photo={household.photo}
  size={64}
/>

Props? : facultatif

namestring

Le nom du foyer, dont l'avatar prend l'initiale quand il n'a pas de photo.

photostring | null

L'adresse de la photo du foyer (household.photo), ou null.

sizenumber

La largeur de l'avatar, en px, anneau compris.

preview?string | null

Une photo que la personne vient de choisir mais n'a pas encore envoyée. Elle s'affiche à la place de photo.