Brickslab.Toolsv2.1.1

@brickslab./ui-web

Empile des cartes comme des notifications téléphone. Chaque nouvel item pop depuis le haut avec un léger bounce ; les cartes précédentes se décalent et réduisent pour former une pile visible.

Aperçu

Pile de notifications (statique)

MessagesHey, tu es dispo ce soir ?
GitHubPR approuvée — brickslab-v1 #42
SlackMarie: nouveau message dans #design

Pile serrée (stackOffset 6, scaleDecrement 0.04)

MessagesHey, tu es dispo ce soir ?
GitHubPR approuvée — brickslab-v1 #42
SlackMarie: nouveau message dans #design

Ajout dynamique — cliquer pour ajouter une notification

MessagesHey, tu es dispo ce soir ?
GitHubPR approuvée — brickslab-v1 #42
SlackMarie: nouveau message dans #design

Props Table

PropTypeDéfautRequisDescription
itemsReact.ReactNode[]—✓Items to stack. Le dernier élément est la carte du dessus (la plus récente).
maxVisiblenumber3—Nombre maximum de cartes visibles dans la pile.
stackOffsetnumber10—Décalage vertical en px entre chaque carte de la pile.
scaleDecrementnumber0.06—Réduction de scale par niveau dans la pile (0.06 = −6% par carte).
classNamestring——Classe CSS du conteneur.
itemClassNamestring——Classe CSS appliquée à chaque carte.
reducedMotion"auto" | "always" | "never""auto"—Gestion du mouvement réduit. "auto" respecte prefers-reduced-motion.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  items={<span>...</span>}
  maxVisible={3}
  stackOffset={10}
  scaleDecrement={0.06}
  className="..."
  itemClassName="..."
  reducedMotion="auto"
/>
itemsmaxVisiblestackOffsetscaleDecrementclassNameitemClassNamereducedMotion

Usage

tsx
import { AnimatedStack } from "@brickslab./ui-web";

const notifications = [
  <NotifCard key="1" title="Messages" body="Hey, tu es dispo ?" />,
  <NotifCard key="2" title="GitHub" body="PR approuvée — brickslab-v1" />,
  <NotifCard key="3" title="Slack" body="Nouveau message de Marie" />,
];

// Pile statique
<AnimatedStack items={notifications} />

// Pile plus serrée
<AnimatedStack items={notifications} stackOffset={6} scaleDecrement={0.04} />

// Ajout dynamique de notifications
const [notifs, setNotifs] = useState(initialNotifs);
const addNotif = () => setNotifs(prev => [...prev, <NewNotif />]);

<button onClick={addNotif}>Nouvelle notif</button>
<AnimatedStack items={notifs} maxVisible={3} />