Oihana Next UI - 0.9.0

Application logo

Panel Components

SidePanel — overlay

Placement & largeur

Le panneau s'ancre à droite (end, par défaut) ou à gauche (start). Sous sm il passe en plein écran — réduis la fenêtre pour le vérifier.

Largeur
Courantwidth = w-full sm:w-[28rem]

Panier — footer épinglé + modale empilée

footerNode passe le panneau en colonne flex : entête figée, liste défilante, total collé en bas. Retirer une ligne ouvre une confirmation par-dessus le panneau — elle porte portal, sans quoi le navigateur fermerait le panneau qui la contient.

6 articles294.20 €
SplitPanel — colonne

Liste + détail

À partir de lg le panneau est une colonne permanente et la liste se rétrécit pour lui faire de la place : on lit les deux en même temps. En dessous, il se replie en overlay qu'on ouvre à la demande. Réduis la fenêtre pour voir la bascule.

Côté
Étatoverlay (< lg)open = false

Autre breakpoint

Le même composant avec breakpoint="md" : il s'épingle plus tôt, à partir de 768px. Les classes responsives sont écrites en entier dans le composant pour rester visibles du scanner Tailwind.

Sous md : le panneau est un overlay.