Arguments, contrôles et module complémentaire Actions
Utilisez les arguments pour rendre les stories interactives et le module complémentaire Actions pour journaliser les événements des composants.
Arguments, contrôles et module complémentaire Actions est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Que sont les arguments ?
Les arguments sont les entrées, ou propriétés, d’un scénario. Storybook utilise l’objet args pour afficher le composant et alimenter le panneau Contrôles, un éditeur de propriétés interactif dans l’interface Storybook.
Définir les arguments
Définissez les arguments dans l’objet du scénario. Storybook déduit le type de contrôle à partir du type de propriété TypeScript.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Le panneau Contrôles
Lorsque des arguments sont définis, Storybook affiche des contrôles interactifs dans le panneau Contrôles sous le canevas. Modifier un contrôle réaffiche le scénario avec de nouvelles propriétés, sans aucune modification du code.
ArgTypes pour personnaliser les contrôles
Utilisez argTypes dans meta pour personnaliser l’affichage d’une propriété dans Contrôles : type, options, description et valeur par défaut.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger'],
description: 'Visual style of the button',
},
size: {
control: { type: 'radio' },
options: ['small', 'medium', 'large'],
},
disabled: { control: 'boolean' },
label: { control: 'text' },
},
};Masquer des arguments dans Contrôles
Définissez control: false dans argTypes pour masquer une propriété dans le panneau Contrôles, ce qui est utile pour les propriétés internes ou les fonctions.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},L’extension Actions
L’extension Actions, incluse dans addon-essentials, consigne les appels de fonctions de propriétés dans le panneau Actions. Utilisez fn() de @storybook/test pour créer des fonctions espionnes affichées dans le panneau.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Connecter automatiquement les actions avec argTypes
Utilisez argTypes: { onClick: { action: 'clicked' } } pour créer automatiquement un gestionnaire d’action sans importer fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Arguments globaux
Définissez les arguments dans preview.ts pour les appliquer globalement à tous les scénarios, ce qui est utile pour les thèmes, les paramètres régionaux ou les arguments de fenêtre d’affichage qui influencent chaque composant.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Barre d’outils Storybook
Les arguments globaux avec une configuration toolbar apparaissent sous forme de boutons dans la barre d’outils Storybook, ce qui vous permet de changer globalement de thème, de paramètres régionaux ou de point de rupture.
Composition des arguments
Réutilisez les arguments d’un autre scénario pour le construire. Cela réduit les duplications lors de la création de scénarios variantes.
export const Primary: Story = {
args: { label: 'Save', variant: 'primary' },
};
export const PrimaryLoading: Story = {
args: { ...Primary.args, loading: true },
};
export const PrimaryDisabled: Story = {
args: { ...Primary.args, disabled: true },
};Mapper les valeurs des contrôles
Utilisez mapping dans argTypes pour associer des options de contrôle lisibles par l’utilisateur aux valeurs réelles des propriétés, par exemple des icônes ou des composants.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Vérification rapide
Que fait la fonction fn() de @storybook/test lorsqu’elle est utilisée comme argument d’un récit ?
Récapitulatif
Les arguments alimentent à la fois le panneau Controls (éditeur de propriétés en direct) et l’addon Actions (journal des événements). Définissez les types d’arguments avec argTypes pour obtenir des contrôles plus riches, utilisez fn() de @storybook/test pour journaliser les actions et composez les arguments entre les récits afin de réduire les répétitions.
Questions Fréquemment Posées
La leçon « Arguments, contrôles et module complémentaire Actions » est-elle gratuite ?
Oui — le texte complet de « Arguments, contrôles et module complémentaire Actions » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Arguments, contrôles et module complémentaire Actions » ?
Utilisez les arguments pour rendre les stories interactives et le module complémentaire Actions pour journaliser les événements des composants. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Arguments, contrôles et module complémentaire Actions » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Storybook dans un projet React
- Écrire des stories CSF3
- Arguments, contrôles et module complémentaire Actions
- Tests Storybook et régression visuelle