Args, Controls e addon Actions
Utilizzi args per rendere interattive le storie e l'addon actions per registrare gli eventi dei componenti.
Args, Controls e addon Actions è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cosa sono gli Args
Gli args sono gli input, cioè le props, di una story. Storybook utilizza l'oggetto args per eseguire il rendering del componente e alimentare il pannello Controls, un editor interattivo delle props nell'interfaccia di Storybook.
Definire gli Args
Imposti gli args nell'oggetto della story. Storybook deduce il tipo di controllo dal tipo della prop TypeScript.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Il pannello Controls
Quando gli args sono definiti, Storybook visualizza controlli interattivi nel pannello Controls sotto il canvas. Modificando un controllo, la story viene renderizzata nuovamente con nuove props, senza bisogno di modificare il codice.
ArgTypes per personalizzare i controlli
Utilizzi argTypes nel meta per personalizzare la modalità di visualizzazione di una prop in Controls: tipo, opzioni, descrizione e valore predefinito.
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' },
},
};Nascondere gli Args da Controls
Imposti control: false in argTypes per nascondere una prop dal pannello Controls, utile per le props interne o per le funzioni.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},L'addon Actions
L'addon Actions, incluso in addon-essentials, registra le chiamate alle funzioni delle props nel pannello Actions. Utilizzi fn() da @storybook/test per creare funzioni spy visualizzabili nel pannello.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Collegare automaticamente le Actions con argTypes
Utilizzi argTypes: { onClick: { action: 'clicked' } } per creare automaticamente un gestore di action senza importare fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Args globali
Imposti gli args in preview.ts per applicarli globalmente a tutte le story, utile per il tema, la lingua o gli args del viewport che influenzano ogni componente.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Barra degli strumenti di Storybook
Gli argomenti globali con la configurazione toolbar vengono visualizzati come pulsanti nella barra degli strumenti di Storybook e consentono di cambiare globalmente temi, impostazioni locali o breakpoint.
Composizione degli Args
Espanda gli args di un'altra story per costruire una nuova story a partire da essa. In questo modo ridurrà la duplicazione nella creazione di story varianti.
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 },
};Mappare i valori dei controlli
Utilizzi mapping in argTypes per associare opzioni dei controlli leggibili dagli utenti ai valori effettivi delle props, ad esempio icone o componenti.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Verifica rapida
Che cosa fa la funzione fn() di @storybook/test quando viene utilizzata come argomento di una story?
Riepilogo
Gli args alimentano sia il pannello Controls (editor live delle props) sia l’addon Actions (registrazione degli eventi). Definisca i tipi degli argomenti con argTypes per ottenere controlli più completi, utilizzi fn() di @storybook/test per registrare le azioni e componga gli args tra le story per ridurre la duplicazione.
Domande Frequenti
La lezione «Args, Controls e addon Actions» è gratuita?
Sì — il testo completo di «Args, Controls e addon Actions» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Args, Controls e addon Actions»?
Utilizzi args per rendere interattive le storie e l'addon actions per registrare gli eventi dei componenti. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Args, Controls e addon Actions»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Storybook in un progetto React
- Scrittura di storie CSF3
- Args, Controls e addon Actions
- Test di Storybook e regressione visiva