目錄
開始使用
請造訪 Storybook 網站 以了解更多關於 Storybook 的資訊並開始使用。
文件
文件可在 Storybook 的文件網站上找到。
範例
檢視 元件百科全書，了解領先團隊如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速建立範例專案。
Storybook 帶有許多用於元件設計、文件、測試、互動等功能的擴充套件。Storybook 的 API 可以以各種方式進行配置和擴展。它甚至被擴展到支援 React Native、Android、iOS 和 Flutter 的行動開發。
社群
如需其他協助，請加入我們的 Storybook Discord。
專案
支援的框架
| 渲染器 | 演示 | |
|---|---|---|
| React |  |
 |
| Angular |  |
 |
| Vue |  |
 |
| Web components |  |
 |
| React Native |  |
 |
| HTML |  |
 |
| Ember |  |
 |
| Svelte |  |
 |
| Preact |  |
 |
| Marionette.js |  |
 |
| Qwik |  |
 |
| SolidJS |  |
 |
| Android、iOS、Flutter |  |
 |
擴充套件
| 擴充套件 | |
|---|---|
| a11y | 在 Storybook 中測試元件的使用者可訪問性 |
| actions | 當使用者在 Storybook UI 中與元件互動時記錄動作 |
| backgrounds | 讓使用者在 Storybook UI 中選擇背景 |
| cssresources | 動態新增/移除元件 iframe 的 CSS 資源 |
| design assets | 在您的 Story 旁邊檢視圖像、影片和網頁連結 |
| docs | 為您的元件新增高品質文件 |
| events | 互動地將事件觸發到響應 EventEmitter 的元件 |
| google-analytics | 報告 Story 的 Google Analytics |
| graphql | 在 Storybook Story 中查詢 GraphQL 伺服器 |
| jest | 在 Storybook 中檢視元件單元測試的結果 |
| links | 在 Story 之間建立連結 |
| measure | 在 Storybook UI 中以視覺方式檢查佈局和 Box Model |
| outline | 在 Storybook UI 中以視覺方式除錯 CSS 佈局和對齊方式 |
| query params | 模擬查詢參數 |
| storyshots | Storybook 中元件的快照測試 |
| storysource | 在 Storybook UI 中檢視您的 Story 的程式碼 |
| viewport | 使用 Storybook 變更響應式元件的顯示大小和佈局 |
請參閱 擴充套件/框架支援表
已棄用的擴充套件
| 擴充套件 | |
|---|---|
| contexts | 用於在動態環境下驅動元件的擴充套件 |
| info | 使用額外的元件使用資訊註釋 Story |
| knobs | 在 Storybook UI 中互動編輯元件屬性資料 |
| notes | 使用註釋註釋 Storybook Story |
| options | 在程式碼中自訂 Storybook UI |
為了持續改善您的體驗，我們必須最終棄用某些擴充套件，以利於使用新的和更好的工具。
如果您正在使用 info/notes，我們強烈建議您改用 docs，並且這裡有一個指南來幫助您。
如果您正在使用 contexts，我們強烈建議您改用 toolbars，並且這裡有一個指南來幫助您。
徽章 & 簡報材料
我們有一個徽章！將其連結到您的 Storybook 即時範例。
[](link to site)
如果您正在尋找可在 Storybook 簡報中使用的材料，例如標誌、影片材料和我們使用的顏色，您可以在我們的 品牌儲存庫中找到所有這些材料。
社群
- 透過 @storybookjs 發推文
- 在 storybook.js.org 和 Medium 上撰寫部落格
- 在 Discord 上聊天
- 在 YouTube 上觀看影片和直播
貢獻
我們隨時歡迎您對 Storybook 做出貢獻！
正在尋找要解決的第一個問題嗎？
- 當我們認為這些問題非常適合剛接觸程式碼庫或一般 OSS 的人時，我們會使用
標記問題。 - 與我們交談，我們會找到適合您技能和學習興趣的內容。
開發腳本
Storybook 使用 Lerna 作為單一儲存庫進行組織。有用的腳本包括
yarn start
使用測試 Story 執行沙箱範本 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 中。[成為贊助商]
贊助者
透過定期捐款，您可以支持我們和我們的工作。[成為贊助者]
授權
-結束-
