回到教學

Storybook 簡介

Storybook 是最受歡迎的 React、Vue 和 Angular UI 元件開發工具。它可以協助您在應用程式之外的獨立環境中開發和設計 UI 元件。學習 Storybook 來建立堅固的 UI 元件,您同時也會從頭開始建構應用程式 UI。
語言英文西班牙文日語葡萄牙文阿拉伯文德語法語義大利文韓語荷蘭文簡體中文正體中文
42+
貢獻者
10
章節
Intro to Storybook

概觀

Storybook 簡介教導使用 Storybook 的元件開發的經過驗證的模式。您將逐步學習重要的 UI 元件技術,同時在 React、Vue 或 Angular 中從頭開始建構 UI。此處的資訊來源於專業團隊、核心維護人員和出色的 Storybook 社群。Airbnb、Dropbox 和 Lonely Planet 的專業開發人員使用 Storybook 更快地建構耐用的文件化 UI。

目錄
  1. 1
    開始使用
    在您的開發環境中設定 Storybook
  2. 2
    簡單元件
    在隔離環境中建構簡單元件
  3. 3
    複合元件
    由較簡單的元件組裝複合元件
  4. 4
    資料
    學習如何將資料連接到您的 UI 元件
  5. 5
    畫面
    由元件建構畫面
  6. 6
    部署
    學習如何線上部署 Storybook
  7. 7
    視覺測試
    學習測試 UI 元件的方法
  8. 8
    擴充套件
    學習如何整合和使用熱門的 Controls 擴充套件
  9. 9
    結論
    將您的所有知識放在一起,並學習更多 Storybook 技術
  10. 10
    貢獻
    協助向世界分享 Storybook

您將建構的內容

React
React Native
Vue
Angular
Svelte

Taskbox UI

Taskbox,一個任務管理 UI(類似於 Asana),包含多個項目類型和狀態。我們將從建構簡單的 UI 元件到組裝畫面。每個章節都說明使用 Storybook 開發 UI 的不同方面。

📖 每個章節都連結到一個工作提交,以協助您保持同步。

作者
loading
Tom Coleman
Storybook 核心
loading
Dominic Nguyen
Storybook 設計
審閱者
loading
João Cardoso
工程師
loading
Carlos Vega
工程師
loading
Carlos Iván Suarez
工程師
loading
Kyle Holmberg
Air 工程師
loading
Daniel Duan
Squarespace 工程師
加入社群
6,616位開發人員及持續增加中
為何為何選擇 Storybook元件驅動的 UI
開放原始碼軟體
Storybook

由以下人員維護
Chromatic
特別感謝 Netlify CircleCI