目錄
開始使用
造訪 Storybook 網站 以了解更多關於 Storybook 的資訊並開始使用。
文件
文件可以在 Storybook 的文件網站上找到。
範例
檢視 元件百科 以了解領先團隊如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速建立一個範例專案。
Storybook 隨附許多用於元件設計、文件、測試、互動等功能的擴充功能。Storybook 的 API 使其能夠以各種方式進行設定和擴展。它甚至已被擴展為支援 React Native、Android、iOS 和 Flutter 的行動開發。
社群
如需額外協助，請在 該儲存庫的 GitHub 討論區中分享您的問題。
專案
支援的框架
| 渲染器 | 示範 | |
|---|---|---|
| React |  |
 |
| Angular |  |
 |
| Vue 3 |  |
 |
| Web 元件 |  |
 |
| React Native |  |
 |
| HTML |  |
 |
| Ember |  |
 |
| Svelte |  |
 |
| Preact |  |
 |
| Qwik |  |
 |
| SolidJS |  |
 |
| Android、iOS、Flutter |  |
 |
擴充功能
| 擴充功能 | |
|---|---|
| a11y | 在 Storybook 中測試元件的易用性 |
| actions | 當使用者在 Storybook UI 中與元件互動時記錄動作 |
| backgrounds | 讓使用者在 Storybook UI 中選擇背景 |
| cssresources | 動態新增/移除元件 iframe 的 CSS 資源 |
| 設計資產 | 檢視與您的故事並排的圖片、影片和網頁連結 |
| docs | 將高品質的文件新增至您的元件 |
| events | 互動式地向回應 EventEmitter 的元件觸發事件 |
| google-analytics | 在故事中報告 Google Analytics |
| graphql | 在 Storybook 故事中查詢 GraphQL 伺服器 |
| jest | 在 Storybook 中檢視元件單元測試的結果 |
| links | 在故事之間建立連結 |
| measure | 在 Storybook UI 中視覺化檢視版面配置和盒模型 |
| outline | 在 Storybook UI 中視覺化除錯 CSS 版面配置和對齊方式 |
| query params | 模擬查詢參數 |
| storysource | 在 Storybook UI 中檢視故事的程式碼 |
| viewport | 使用 Storybook 變更回應式元件的顯示大小和版面配置 |
請參閱 擴充功能/框架支援表
為了持續改進您的體驗，我們最終必須棄用或移除某些擴充功能，以支持新的、更好的工具。
如果您正在使用 info/notes，我們強烈建議您改為移轉至 docs，並且這裡有一個指南可以幫助您。
如果您正在使用 contexts，我們強烈建議您改為移轉至 toolbars，並且這裡有一個指南可以幫助您。
如果您正在使用 addon-storyshots，我們強烈建議您改為移轉至 Storybook test-runner，並且這裡有一個指南可以幫助您。
徽章與簡報材料
我們有一個徽章！將其連結到您的即時 Storybook 範例。
[](link to site)
如果您正在尋找在 Storybook 簡報中使用的材料，例如標誌、影片材料以及我們使用的顏色，您可以在我們的 品牌儲存庫中找到所有這些材料。
社群
- 透過 @storybookjs 發推文
- 在 storybook.js.org 和 Medium 上撰寫部落格
- 在 Discord 上聊天
- 在 YouTube 上觀看影片和串流
貢獻
我們隨時歡迎對 Storybook 的貢獻！
正在尋找要處理的第一個問題嗎？
- 當我們認為這些問題非常適合剛接觸程式碼庫或一般 OSS 的人時，我們會使用
標記問題。 - 與我們交談，我們會找到適合您技能和學習興趣的東西。
開發腳本
Storybook 以單一儲存庫的形式組織。有用的腳本包括
yarn start
執行包含測試故事的沙箱範本 Storybook
yarn task
如上所述，但讓您可以自訂沙箱（例如，選擇其他框架）
yarn lint
布林值檢查程式碼是否符合 linting 規則 - 使用 remark 和 eslint
yarn lint:js- 將檢查 jsyarn lint:md- 將檢查 markdown + 程式碼範例yarn lint:js --fix- 將自動修復 js
yarn test
布林值檢查單元測試是否全部通過 - 使用 jest
yarn run test --core --watch- 將以監看模式執行核心測試
贊助商
成為贊助商，讓您的標誌和網站 URL 出現在我們 Github 的 README 上。[成為贊助商]
贊助者
透過定期捐款，您可以支持我們和我們的工作。[成為贊助者]
許可證
-結束-
