目錄
開始使用
請造訪 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 資源 |
| design assets | 在您的故事旁邊檢視影像、影片和網頁連結 |
| 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 中。[成為贊助商]
贊助者
透過定期捐款，您可以支持我們和我們的工作。[成為贊助者]
授權條款
-結束-
