Vue Academy · Pelajaran

Menulis Story Komponen

Format CSF3, ekspor default (title, component), ekspor bernama sebagai story, serta args.

Menulis Story Komponen adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Cerita Menjelaskan Keadaan Komponen

Sebuah cerita merekam satu keadaan komponen — kumpulan properti dan konten tertentu. Sebuah tombol mungkin memiliki cerita Primary, Secondary, dan Disabled. Storybook merender masing-masing sebagai contoh terpisah yang dapat dijelajahi.

CSF3: Format Modern

Storybook menggunakan Component Story Format 3 (CSF3). Sebuah berkas memiliki satu ekspor bawaan yang menjelaskan komponen dan ekspor bernama untuk setiap cerita. Isinya adalah objek JavaScript/TypeScript biasa — dengan kode berulang yang minimal.

Ekspor Bawaan (Meta)

Ekspor bawaan adalah objek meta. Setidaknya objek ini memiliki title (jalur bilah sisi) dan component yang didokumentasikan.

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

title Mengatur Bilah Sisi

title menggunakan garis miring untuk membuat hierarki folder di bilah sisi Storybook. "Forms/Inputs/TextField" membuat tiga tingkat bersarang.

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

Ekspor Bernama Adalah Cerita

Setiap ekspor bernama adalah varian cerita. Nama ekspor menjadi label cerita di bilah sisi.

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

Objek args

Objek args sebuah cerita menyediakan nilai properti. Storybook meneruskannya ke komponen, dan panel Controls memungkinkan Anda mengubahnya secara langsung.

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

Beberapa Varian melalui args

Gunakan kembali komponen yang sama di berbagai cerita dengan hanya mengubah args. Setiap ekspor merender komponen dengan properti yang berbeda.

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

Args Bawaan pada Meta

Letakkan args bersama pada objek meta; setiap cerita hanya mengganti bagian yang berbeda. Dengan demikian, cerita tetap DRY.

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

Cerita dengan Slot melalui render

Untuk konten berslot, sediakan fungsi render yang mengembalikan templat menggunakan komponen tersebut. Ini mencakup kasus yang tidak dapat dinyatakan hanya dengan args.

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

Dokumentasi Otomatis dengan tags

Tambahkan tags: ["autodocs"] ke meta agar Storybook secara otomatis membuat halaman dokumentasi untuk komponen berdasarkan properti dan ceritanya.

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

Yang Dihasilkan autodocs

Halaman autodocs mencantumkan properti komponen (nama, jenis, bawaan), menampilkan setiap cerita sebagai contoh langsung, dan merender komentar deskripsi apa pun — spesifikasi yang selalu diperbarui tanpa berkas tambahan.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang penulisan cerita.

Ringkasan

Anda telah mempelajari cara menulis cerita komponen:

Sebuah cerita merekam satu keadaan komponen; CSF3 menggunakan ekspor berbentuk objek.
Ekspor bawaan adalah meta dengan title (jalur bilah sisi) dan component.
Setiap ekspor bernama adalah varian cerita; args menyediakan nilai propertinya.
Args bersama diletakkan pada meta; cerita mengganti sisanya. Gunakan render untuk slot.
tags: ["autodocs"] secara otomatis membuat halaman dokumentasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menulis Story Komponen” gratis?

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

Apa yang akan aku pelajari di “Menulis Story Komponen”?

Format CSF3, ekspor default (title, component), ekspor bernama sebagai story, serta args. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 2 dari 4.

Berapa lama pelajaran “Menulis Story Komponen” 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 Vue Academy ini?

Ya. Setiap pelajaran Vue 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

Menyiapkan Storybook untuk Vue 3
Menulis Story Komponen
Controls, Actions, dan Args
Addon Storybook dan Pengujian Aksesibilitas

← Kembali ke Vue Academy