React Academy · Pelajaran

Args, Controls & Addon Actions

Gunakan args agar story bersifat interaktif dan addon actions untuk mencatat event komponen.

Args, Controls & Addon Actions adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Argumen?

Argumen adalah masukan (properti) untuk sebuah cerita. Storybook menggunakan objek args untuk merender komponen dan mengaktifkan panel Kontrol—editor properti langsung di antarmuka Storybook.

Mendefinisikan Argumen

Tetapkan argumen dalam objek cerita. Storybook menyimpulkan jenis kontrol dari tipe properti TypeScript.

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

Panel Kontrol

Saat argumen ditetapkan, Storybook menampilkan kontrol interaktif dalam panel Kontrol di bawah kanvas. Mengubah suatu kontrol akan merender ulang cerita dengan properti baru—tidak diperlukan perubahan kode.

ArgTypes untuk Penyesuaian Kontrol

Gunakan argTypes dalam meta untuk menyesuaikan cara suatu properti ditampilkan di Kontrol: tipe, opsi, deskripsi, dan nilai bawaan.

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' },
  },
};

Menyembunyikan Argumen dari Kontrol

Tetapkan control: false dalam argTypes untuk menyembunyikan suatu properti dari panel Kontrol—berguna untuk properti internal atau fungsi.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

Add-on Aksi

Add-on Aksi (bagian dari addon-essentials) mencatat pemanggilan fungsi properti dalam panel Aksi. Gunakan fn() dari @storybook/test untuk membuat fungsi pemantau yang ditampilkan di panel.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

Menghubungkan Aksi secara Otomatis dengan argTypes

Gunakan argTypes: { onClick: { action: 'clicked' } } untuk membuat penangan aksi secara otomatis tanpa mengimpor fn().

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Argumen Global

Tetapkan argumen dalam preview.ts untuk menerapkannya ke semua cerita secara global—berguna untuk argumen tema, lokal, atau area pandang yang memengaruhi setiap komponen.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Bilah Alat Storybook

Argumen global dengan konfigurasi toolbar muncul sebagai tombol di bilah alat Storybook, sehingga Anda dapat mengganti tema, lokal, atau titik henti secara global.

Komposisi Argumen

Gabungkan argumen dari cerita lain untuk mengembangkannya. Cara ini mengurangi duplikasi saat membuat cerita varian.

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 },
};

Memetakan Nilai Kontrol

Gunakan mapping dalam argTypes untuk memetakan opsi kontrol yang mudah dipahami ke nilai properti sebenarnya (misalnya, ikon atau komponen).

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

Pemeriksaan Singkat

Apa yang dilakukan fungsi fn() dari @storybook/test saat digunakan sebagai argumen cerita?

Rangkuman

Argumen menggerakkan panel Kontrol (editor prop langsung) dan tambahan Tindakan (pencatat peristiwa). Tentukan jenis argumen dengan argTypes untuk mendapatkan kontrol yang lebih lengkap, gunakan fn() dari @storybook/test untuk pencatatan tindakan, dan gabungkan argumen antarcerita untuk mengurangi duplikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Args, Controls & Addon Actions” gratis?

Ya — teks lengkap “Args, Controls & Addon Actions” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Args, Controls & Addon Actions”?

Gunakan args agar story bersifat interaktif dan addon actions untuk mencatat event komponen. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Args, Controls & Addon Actions” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy