目錄
開始使用
請訪問 Storybook 網站 以了解更多關於 Storybook 的資訊並開始使用。
文件
文件可以在 Storybook 的文件網站上找到。
範例
請檢視元件百科，以了解領先團隊如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速建立範例專案。
Storybook 附帶許多用於元件設計、文件、測試、互動性等方面的擴充功能。Storybook 的 API 使其能夠以各種方式進行配置和擴展。它甚至已被擴展為支援 React Native、Android、iOS 和 Flutter 的行動開發。
社群
如需額外協助，請在 該儲存庫的 GitHub Discussions 中分享您的問題。
專案
支援的框架
| 渲染器 | 演示 | |
|---|---|---|
| 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
布林值檢查程式碼是否符合程式碼風格規則 - 使用 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 中。 [成為贊助商]
贊助者
透過定期捐款，您可以支持我們和我們的工作。 [成為贊助者]
授權
-結束-
