瀏覽故事

在上個章節中，我們學到故事對應於離散的元件狀態。本章示範如何將 Storybook 作為建立元件的工作坊。

側邊欄和畫布

一個 *.stories.js 檔案會定義元件的所有故事。每個故事都有對應的側邊欄項目。當您點擊一個故事時，它會在畫布中呈現一個隔離的預覽 iframe。

透過點擊側邊欄中的故事來在故事之間導覽。試試側邊欄搜尋以依名稱尋找故事。

或者使用鍵盤快捷鍵。點擊 Storybook 的選單以查看可用的快捷鍵清單。

工具列

Storybook 內建了省時的工具。工具列包含可讓您調整故事在畫布中呈現方式的工具

• 🔍 縮放會視覺縮放元件，以便您可以檢查細節。
• 🖼 背景會變更元件後方的呈現背景，以便您可以驗證元件在不同視覺內容中的呈現方式。
• 📐 格線會在格線配置頂端呈現元件，以便您可以驗證元件是否正確對齊。
• 📏 測量會切換測量覆蓋層，以協助您檢查元件的尺寸。
• 🎚️ 外框會顯示元件的邊界框，以便您可以驗證元件是否正確定位。
• 📱 可視區域會在各種尺寸和方向呈現元件。這是檢查元件回應性的理想方式。

「文件」頁面會顯示元件的自動產生文件（從原始碼推斷）。例如，在應用程式中與團隊分享可重複使用的元件時，使用文件會很有幫助。

工具列是可自訂的。您可以使用全域變數來快速切換主題和語言。或者從社群安裝 Storybook 工具列擴充套件以啟用進階工作流程。

擴充套件

擴充套件是擴充 Storybook 核心功能的外掛程式。您可以在擴充套件面板中找到它們，該面板是 Storybook UI 中畫布下方的保留位置。每個標籤都會顯示擴充套件所選取故事的產生的中繼資料、記錄或靜態分析。

• 控制項可讓您動態與元件的 args (輸入) 互動。實驗元件的替代設定，以探索邊緣案例。
• 動作可協助您透過回呼驗證互動是否產生正確的輸出。例如，如果您檢視 Header 元件的「已登入」故事，我們可以驗證點擊「登出」按鈕是否會觸發 onLogout 回呼，該回呼將由使用 Header 的元件提供。
• 互動提供有用的使用者介面，用於使用 play 函式偵錯元件測試。
• 視覺測試可讓您透過直接在 Storybook 中提供即時回饋來找出本機開發環境中的 UI 錯誤。

Storybook 是可擴充的。我們豐富的擴充套件生態系統可協助您測試、記錄和最佳化您的故事。您也可以建立擴充套件以滿足您的工作流程需求。請在擴充套件區段中閱讀更多內容。

在下一章中，我們將讓您的元件在 Storybook 中呈現，以便您可以使用它來增強元件開發。

使用故事建立 UI

在建立應用程式時，最大的挑戰之一是找出您的程式碼庫中是否已存在 UI，以及如何將其用於您正在建立的新功能。

Storybook 會編目您的所有元件及其使用案例。因此，您可以快速瀏覽它以找到您要尋找的內容。

以下是工作流程的樣子

• 🗃 使用側邊欄尋找合適的元件
• 👀 檢閱其故事以選取符合您需求的變體
• 📝 將故事定義複製/貼上到您的應用程式程式碼中，並將其連接到資料

您可以從 stories 檔案存取故事定義，或使用 Storysource 附加元件 或 Docs 附加元件，使其在您發佈的 Storybook 中可用。