Headers Component
PageHeader Examples
Title Only
<PageHeader title="Products" />Title + Description
<PageHeader title = "Products" description = "Browse and manage the full product catalog."/>Title + Subtitle + Description
<PageHeader title = "Products" subtitle = "48 results" description = "Browse and manage the full product catalog."/>With Icon
import { AiFillProduct } from 'react-icons/ai' ;<PageHeader icon = { AiFillProduct } title = "Products" description = "Browse and manage the full product catalog."/>With Right Actions
<PageHeader icon = { AiFillProduct } title = "Products" right = { <div className="flex items-center gap-2"> <Button icon={ MdRefresh } /> <Button color="primary" icon={ MdAdd }>Add</Button> </div> }/>With Divider
Content below the divider...
<PageHeader showDivider = { true } title = "Products"/>With Motion Animation
import SlideDown from 'oihana-next-ui/motions/SlideDown' ;<PageHeader animated = { true } MotionComponent = { SlideDown } motionOptions = { { delay: 0, start: -20 } } title = "Notifications"/>Custom Avatar Content
<PageHeader avatar = { <span className="font-bold">AS</span> } title = "Acme Studio" subtitle = "Design & prototyping"/>Without Avatar
<PageHeader showAvatar = { false } title = "Settings" description = "Manage your account and preferences."/>Real-world — ThingsPage Header
Usage via ThingsPage — the header is rendered automatically from i18n + icon props.
← Rendered by ThingsPage when showHeader=true
<ThingsPage icon = { AiFillProduct } path = "app.products" showHeader = { true } showDescription = { true } refreshable = { true } addable = { true } addPath = "/products/add" url = "products"/>icon — composant ou élément
Un Server Component ne peut pas passer un TYPE de composant à un Client Component. Il rend donc l'icône lui-même et transmet le nœud : icon accepte les deux.
<PageHeader icon={ MdFolder } title="…" /><PageHeader icon={ <MdFolder className="size-5 text-primary" /> } title="…" />stackBelow — la zone droite passe à la ligne
Sous le point de rupture, les actions prennent une ligne à elles. Sans cela, la colonne du titre — qui peut se réduire à zéro — se plie en quatre lignes autour des boutons au lieu de les pousser dessous.
Le premier en-tête est réglé sur 2xl : il se plie déjà sur cet écran. Le deuxième garde le défaut sm — rétrécissez la fenêtre sous 640 px pour le voir faire. Le troisième est àfalse : il ne se plie jamais.