Catalogue de composants
Trouvez les composants par usage, avec leurs références d’API, exemples et conseils d’accessibilité.
Trouvez les composants par usage, avec leurs références d’API, exemples et conseils d’accessibilité.
Mise en page adaptative avec barres et panneau latéral contrôlés séparément.
import { AdaptiveAppLayout } from "@liquidify/react/adaptive-app-layout"| Prop | Type | Valeur par défaut | Description |
|---|---|---|---|
| actions | LayoutSlot | Non précisé | |
| appName | string | undefined | Non précisé | |
| asChild | undefined | Non précisé | Plusieurs éléments internes ne peuvent pas fusionner avec un seul enfant. |
| bottomBar | AdaptiveAppBarOptions | null | undefined | Non précisé | |
| children obligatoire | ReactNode | Non précisé | |
| className | string | undefined | Non précisé | Classe CSS supplémentaire pour la surface. Permet de modifier les tokens `--lq-*` dans une feuille de styles. |
| compactNavigation | { label: string; icon?: ReactNode; } | undefined | Non précisé | |
| contentInset | "automatic" | "none" | undefined | Non précisé | Espacement automatique du contenu ou padding défini par l’application avec les tokens publics de marge intérieure. |
| contentProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Non précisé | |
| defaultSidebarOpen | boolean | undefined | Non précisé | |
| gap | LayoutSpacing | undefined | Non précisé | |
| leading | LayoutSlot | Non précisé | |
| navigation | LayoutSlot | Non précisé | |
| onPresentationChange | ((change: AdaptivePresentationChange) => void) | undefined | Non précisé | |
| onSidebarOpenChange | ((open: boolean, details: AdaptiveStateChange<boolean>) => void) | undefined | Non précisé | |
| ref | Ref<HTMLDivElement> | undefined | Non précisé | Ref vers la racine rendue ou l’enfant fusionné. Son type générique suit la racine polymorphe du composant et vaut `HTMLElement` par défaut. |
| scrollBehavior | AdaptiveScrollBehavior | undefined | Non précisé | |
| separation | LayoutSpacing | undefined | Non précisé | |
| showCompactNavigation | boolean | undefined | Non précisé | |
| showSidebar | boolean | undefined | Non précisé | La valeur par défaut dépend de la présence de contenu de navigation ou du panneau latéral. |
| sidebar | LayoutSlot | Non précisé | |
| sidebarContentProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined | Non précisé | |
| sidebarFooter | LayoutSlot | Non précisé | |
| sidebarOpen | boolean | undefined | Non précisé | |
| sidebarProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Non précisé | |
| sidebarTitle | string | undefined | Non précisé | |
| sidebarToggle | LayoutSlot | Non précisé | `undefined` utilise le contrôle standard ; `null` le supprime. |
| sidebarToggleLabels | { readonly show: string; readonly hide: string; } | undefined | Non précisé | Libellés accessibles du contrôle latéral par défaut. |
| skipLinkLabel | string | undefined | Non précisé | |
| title | string | undefined | Non précisé | |
| topBar | AdaptiveAppBarOptions | null | undefined | Non précisé | `null` supprime la barre ; `undefined` utilise le contenu par défaut. |
| visualDebug | boolean | undefined | Non précisé |