Catálogo de componentes
Encuentra componentes según su función, con referencias de API, ejemplos y pautas de accesibilidad.
Encuentra componentes según su función, con referencias de API, ejemplos y pautas de accesibilidad.
Diseño adaptable con barras y panel lateral controlados de forma independiente.
import { AdaptiveAppLayout } from "@liquidify/react/adaptive-app-layout"| Prop | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
| actions | LayoutSlot | Sin especificar | |
| appName | string | undefined | Sin especificar | |
| asChild | undefined | Sin especificar | No se pueden combinar varios elementos propios en un solo hijo. |
| bottomBar | AdaptiveAppBarOptions | null | undefined | Sin especificar | |
| children obligatoria | ReactNode | Sin especificar | |
| className | string | undefined | Sin especificar | Clase CSS adicional para la superficie. Permite modificar tokens `--lq-*` desde una hoja de estilos. |
| compactNavigation | { label: string; icon?: ReactNode; } | undefined | Sin especificar | |
| contentInset | "automatic" | "none" | undefined | Sin especificar | Espaciado automático del contenido o padding de la aplicación mediante tokens públicos de margen interior. |
| contentProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Sin especificar | |
| defaultSidebarOpen | boolean | undefined | Sin especificar | |
| gap | LayoutSpacing | undefined | Sin especificar | |
| leading | LayoutSlot | Sin especificar | |
| navigation | LayoutSlot | Sin especificar | |
| onPresentationChange | ((change: AdaptivePresentationChange) => void) | undefined | Sin especificar | |
| onSidebarOpenChange | ((open: boolean, details: AdaptiveStateChange<boolean>) => void) | undefined | Sin especificar | |
| ref | Ref<HTMLDivElement> | undefined | Sin especificar | Ref a la raíz renderizada o al hijo combinado. Su tipo genérico sigue la raíz polimórfica del componente y usa `HTMLElement` por defecto. |
| scrollBehavior | AdaptiveScrollBehavior | undefined | Sin especificar | |
| separation | LayoutSpacing | undefined | Sin especificar | |
| showCompactNavigation | boolean | undefined | Sin especificar | |
| showSidebar | boolean | undefined | Sin especificar | El valor por defecto depende de si hay contenido de navegación o del panel lateral. |
| sidebar | LayoutSlot | Sin especificar | |
| sidebarContentProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined | Sin especificar | |
| sidebarFooter | LayoutSlot | Sin especificar | |
| sidebarOpen | boolean | undefined | Sin especificar | |
| sidebarProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Sin especificar | |
| sidebarTitle | string | undefined | Sin especificar | |
| sidebarToggle | LayoutSlot | Sin especificar | `undefined` usa el control estándar; `null` lo omite. |
| sidebarToggleLabels | { readonly show: string; readonly hide: string; } | undefined | Sin especificar | Etiquetas accesibles del control lateral por defecto. |
| skipLinkLabel | string | undefined | Sin especificar | |
| title | string | undefined | Sin especificar | |
| topBar | AdaptiveAppBarOptions | null | undefined | Sin especificar | `null` omite la barra; `undefined` usa el contenido por defecto. |
| visualDebug | boolean | undefined | Sin especificar |