Vue Slots | Integrasi Storybook
Fitur
- Dukungan Vue 3
- Membuat potongan kode untuk cerita dengan slot
- Mengontrol aspek spesifik slot melalui kontrol Storybook
- Membungkus konten slot dengan komponen
📦 Instalasi
Jalankan perintah berikut:
pnpm add -D storybook-addon-vue-slotsTambahkan storybook-addon-vue-slots ke dalam daftar plugin di file main:
// .storybook/main
export default {
addons: ['storybook-addon-vue-slots'],
} satisfies StorybookConfigContoh
Jalankan:
npm run storybookUntuk menjalankan contoh Storybook.
Penggunaan
Zero
Secara default, addon akan meneruskan arg [slotName] ke template, misalnya {{ argst }}.
Basic
Tambahkan deskripsi ke slot dengan memberikan string ke definisi slot:
// stories
export default meta = {
parameters: {
slots: {
default: `Konten slot default`,
},
},
}Standard
Gunakan args.[slotName] di dalam template untuk mengirim data dari kontrol Storybook ke slot, atau akses arg lainnya.
// stories
export default meta = {
parameters: {
slots: {
default: {
description: 'Slot default',
template: `{{ argst }}
`,
},
header: {
description: 'Slot header',
template: `{{ args }}
`,
},
},
},
}Advanced
Menambahkan komponen:
// stories
export default meta = {
parameters: {
slots: {
default: {
description: 'Slot default',
template: `{{ argst }}
`,
},
header: {
description: 'Slot header',
components: { AppButton },
template: `{{ args }} `,
},
},
},
}
Platform Lainnya
Berita Piala Dunia
Jika Anda memiliki pertanyaan, silakan kirim email ke [email protected]