返回教學

Storybook 簡介

Storybook 是最受歡迎的 UI 元件開發工具,適用於 React、Vue 和 Angular。它可以協助您在應用程式之外的獨立環境中開發和設計 UI 元件。學習 Storybook 以建立堅如磐石的 UI 元件,在此過程中,您將從頭開始建構應用程式 UI。
語言EnglishEspañol日本語PortuguêsالعربيةDeutschFrançaisItaliano한국어Nederlands简体中文正體中文
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 的不同面向。

📖 每個章節都連結到一個可運作的 commit,以協助您保持同步。

作者
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,721位開發人員及更多
為何選擇為何選擇 Storybook元件驅動 UI
開放原始碼軟體
Storybook - Storybook 繁體中文

特別感謝 Netlify 以及 CircleCI