目錄
開始使用
請造訪 Storybook 網站以瞭解更多關於 Storybook 的資訊並開始使用。
文件
文件可以在 Storybook 的文件網站上找到。
範例
檢視 元件百科全書以瞭解領先的團隊如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速建立範例專案。
Storybook 帶有許多用於元件設計、文件、測試、互動性等的擴充功能。Storybook 的 API 可以以各種方式進行配置和擴展。它甚至已擴展到支援 React Native、Android、iOS 和 Flutter 的行動開發。
社群
如需其他協助，請在該儲存庫的 GitHub 討論區中分享您的問題。
專案
支援的框架
| 渲染器 | 示範 | |
|---|---|---|
| React |  |
 |
| Angular |  |
 |
| Vue 3 |  |
 |
| Web Components |  |
 |
| React Native |  |
 |
| HTML |  |
 |
| Ember |  |
 |
| Svelte |  |
 |
| Preact |  |
 |
| Qwik |  |
 |
| SolidJS |  |
 |
| Android、iOS、Flutter |  |
 |
擴充功能
| 擴充功能 | |
|---|---|
| a11y | 在 Storybook 中測試元件的使用者可訪問性 |
| actions | 記錄使用者在 Storybook UI 中與元件互動的操作 |
| backgrounds | 讓使用者在 Storybook UI 中選擇背景 |
| cssresources | 動態新增/移除元件 iframe 的 CSS 資源 |
| design assets | 在您的 Story 旁邊檢視圖片、影片和網路連結 |
| 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 中。[成為贊助商]
贊助者
透過定期捐款，您可以支持我們和我們的工作。[成為贊助者]
授權
-結束-
