Bileşen Hikâyeleri Yazma
CSF3 biçimi, varsayılan dışa aktarma (title, component), hikâye olarak adlandırılmış dışa aktarmalar ve args.
Bileşen Hikâyeleri Yazma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Story'ler Bileşen Durumlarını Açıklar
Bir story, bir bileşenin tek bir durumunu — belirli bir özellik ve içerik kümesini — temsil eder. Bir düğmenin Primary, Secondary ve Disabled story'leri olabilir. Storybook her birini ayrı, göz atılabilir bir örnek olarak görüntüler.
CSF3: Modern Biçim
Storybook, Bileşen Story Biçimi 3'ü (CSF3) kullanır. Bir dosyada bileşeni açıklayan bir varsayılan dışa aktarma ve her story için adlandırılmış dışa aktarmalar bulunur. Bunlar düz JavaScript/TypeScript nesneleridir — tekrar eden başlangıç kodu en aza indirilmiştir.
Varsayılan Dışa Aktarma (Üst Veri)
Varsayılan dışa aktarma, üst veri nesnesidir. En azından bir title (kenar çubuğu yolu) ve belgelenen component değerini içerir.
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}title Kenar Çubuğunu Düzenler
title, Storybook kenar çubuğunda klasör hiyerarşisi oluşturmak için eğik çizgileri kullanır. "Forms/Inputs/TextField", üç düzey derinlikte iç içe klasör oluşturur.
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}Adlandırılmış Dışa Aktarmalar Story'lerdir
Her adlandırılmış dışa aktarma bir story çeşididir. Dışa aktarma adı, kenar çubuğundaki story etiketine dönüşür.
export const Primary = {}
export const Secondary = {}
export const Disabled = {}args Nesnesi
Bir story'nin args nesnesi özellik değerlerini sağlar. Storybook bunları bileşene aktarır ve Controls paneli bunları anında değiştirmenize olanak tanır.
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}args ile Birden Çok Çeşit
Yalnızca args değerlerini değiştirerek aynı bileşeni story'ler arasında yeniden kullanın. Her dışa aktarma, bileşeni farklı özelliklerle görüntüler.
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }Üst Veride Varsayılan args Değerleri
Paylaşılan args değerlerini üst veri nesnesine yerleştirin; tek tek story'ler yalnızca farklı olanları geçersiz kılsın. Bu, story'leri DRY tutar.
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }render ile Slot Kullanan Story'ler
Slot içeriği için bileşeni kullanan bir şablon döndüren render işlevi sağlayın. Bu, yalnızca args ile ifade edilemeyen durumları kapsar.
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}tags ile Otomatik Oluşturulan Belgeler
Bileşen için Storybook'un özelliklerinden ve story'lerinden otomatik olarak bir belge sayfası oluşturmasını sağlamak üzere üst veri nesnesine tags: ["autodocs"] ekleyin.
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}autodocs Neler Oluşturur?
autodocs sayfası bileşenin özelliklerini (ad, tür, varsayılan değer) listeler, her story'yi canlı bir örnek olarak gösterir ve açıklama yorumlarını görüntüler — ek dosıraya gerek kalmadan yaşayan bir belirtim sunar.
Kısa Kontrol
Story yazma konusunu anlayıp anlamadığınızı kontrol edin.
Özet
Bileşen story'leri yazmayı öğrendiniz:
- Bir story, bileşenin tek bir durumunu temsil eder; CSF3 nesne dışa aktarmalarını kullanır.
- Varsayılan dışa aktarma,
title(kenar çubuğu yolu) vecomponentiçeren üst veridir. - Her adlandırılmış dışa aktarma bir story çeşididir;
argsözellik değerlerini sağlar. - Paylaşılan args değerleri üst veride bulunur; story'ler geri kalanını geçersiz kılar. Slotlar için
renderkullanın. tags: ["autodocs"], otomatik olarak bir belge sayfası oluşturur.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Bileşen Hikâyeleri Yazma” dersi ücretsiz mi?
Evet — “Bileşen Hikâyeleri Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Bileşen Hikâyeleri Yazma” dersinde ne öğreneceğim?
CSF3 biçimi, varsayılan dışa aktarma (title, component), hikâye olarak adlandırılmış dışa aktarmalar ve args. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Bileşen Hikâyeleri Yazma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue 3 için Storybook Kurulumu
- Bileşen Hikâyeleri Yazma
- Kontroller, Actions ve Args
- Storybook Eklentileri ve Erişilebilirlik Testleri