Args, Controls og Actions Addon
Bruk args for å gjøre stories interaktive, og Actions Addon for å logge komponentevents.
Args, Controls og Actions Addon er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.
Hva er Args
Args er inndataene (props) til en story. Storybook bruker args-objektet til å gjengi komponenten og styre Controls-panelet – en aktiv prop-editor i Storybook-grensesnittet.
Definere Args
Angi args i story-objektet. Storybook utleder kontrolltypen fra TypeScript-prop-typen.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Controls-panelet
Når args er definert, gjengir Storybook interaktive kontroller i Controls-panelet under lerretet. Når en kontroll endres, gjengis storyen på nytt med nye props – det kreves ingen kodeendringer.
argTypes for tilpasning av kontroller
Bruk argTypes i meta for å tilpasse hvordan en prop vises i Controls: type, alternativer, beskrivelse og standardverdi.
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' },
},
};Skjule Args fra Controls
Angi control: false i argTypes for å skjule en prop fra Controls-panelet – nyttig for interne props eller funksjoner.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},Actions-tillegget
Actions-tillegget (en del av addon-essentials) logger kall til prop-funksjoner i Actions-panelet. Bruk fn() fra @storybook/test for å opprette spy-funksjoner som vises i panelet.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Koble Actions automatisk med argTypes
Bruk argTypes: { onClick: { action: 'clicked' } } for å opprette en action-handler automatisk uten å importere fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Globale Args
Angi args i preview.ts for å bruke dem globalt på alle stories – nyttig for tema, lokalisering eller viewport-args som påvirker alle komponenter.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Storybook-verktøylinjen
Globale args med toolbar-konfigurasjon vises som knapper i Storybook-verktøylinjen, slik at De kan bytte temaer, språkinnstillinger eller bruddpunkter globalt.
Sammensetting av Args
Spre args fra en annen story for å bygge videre på den. Dette reduserer duplisering når du oppretter variant-stories.
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 },
};Tilordne kontrollverdier
Bruk mapping i argTypes for å tilordne menneskelesbare kontrollalternativer til faktiske prop-verdier, for eksempel ikoner eller komponenter.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Kort sjekk
Hva gjør funksjonen fn() fra @storybook/test når den brukes som et story-argument?
Oppsummering
Args driver både Controls-panelet (direkte redigering av props) og Actions-tillegget (hendelseslogg). Definer arg-typer med argTypes for mer avanserte kontroller, bruk fn() fra @storybook/test til handlingslogging, og komponer args på tvers av stories for å redusere duplisering.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Args, Controls og Actions Addon» gratis?
Ja – hele teksten i «Args, Controls og Actions Addon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Args, Controls og Actions Addon»?
Bruk args for å gjøre stories interaktive, og Actions Addon for å logge komponentevents. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Args, Controls og Actions Addon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sette opp Storybook i et React-prosjekt
- Skrive CSF3 Stories
- Args, Controls og Actions Addon
- Storybook-testing og visuell regresjon