Args, Controls y el addon Actions
Utilice args para hacer interactivas las historias y el addon actions para registrar eventos de los componentes.
Args, Controls y el addon Actions es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué son los Args?
Los Args son las entradas (props) de una story. Storybook utiliza el objeto args para renderizar el componente y proporcionar el panel Controls, un editor de props interactivo en la interfaz de Storybook.
Definir Args
Establezca los args en el objeto de la story. Storybook infiere el tipo de control a partir del tipo de prop de TypeScript.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};El panel Controls
Cuando se definen args, Storybook muestra controles interactivos en el panel Controls, debajo del canvas. Al cambiar un control, la story se vuelve a renderizar con props nuevas, sin necesidad de modificar el código.
ArgTypes para personalizar controles
Use argTypes en el meta para personalizar cómo aparece una prop en Controls: tipo, opciones, descripción y valor predeterminado.
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' },
},
};Ocultar Args en Controls
Establezca control: false en argTypes para ocultar una prop del panel Controls; resulta útil para props internas o funciones.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},El addon Actions
El addon Actions (incluido en addon-essentials) registra las llamadas a funciones de las props en el panel Actions. Use fn() de @storybook/test para crear funciones spy que se muestren en el panel.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Vincular Actions automáticamente con argTypes
Use argTypes: { onClick: { action: 'clicked' } } para crear automáticamente un handler de acción sin importar fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Args globales
Establezca args en preview.ts para aplicarlos globalmente a todas las stories; resulta útil para definir el tema, el locale o el viewport que afectan a cada componente.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Barra de herramientas de Storybook
Los argumentos globales con la configuración toolbar aparecen como botones en la barra de herramientas de Storybook, lo que le permite cambiar globalmente los temas, las configuraciones regionales o los puntos de ruptura.
Composición de Args
Extienda los args de otra story para basarse en ella. Esto reduce la duplicación al crear stories de 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 },
};Asignar valores de controles
Use mapping en argTypes para asignar opciones de control legibles para las personas a los valores reales de las props, como iconos o componentes.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Comprobación rápida
¿Qué hace la función fn() de @storybook/test cuando se utiliza como un arg de una story?
Recapitulación
Los args impulsan tanto el panel Controls (editor de props en vivo) como el addon Actions (registrador de eventos). Defina los tipos de args con argTypes para obtener controles más completos, use fn() de @storybook/test para registrar acciones y componga args entre stories para reducir la duplicación.
Preguntas frecuentes
¿La lección «Args, Controls y el addon Actions» es gratis?
Sí — el texto completo de «Args, Controls y el addon Actions» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Args, Controls y el addon Actions»?
Utilice args para hacer interactivas las historias y el addon actions para registrar eventos de los componentes. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Args, Controls y el addon Actions»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Storybook en un proyecto de React
- Escribir historias CSF3
- Args, Controls y el addon Actions
- Pruebas de Storybook y regresión visual