可重複使用的控制元件

mstmahmuda11121

程式碼範例 5 中顯示的故事展示了應用程式開發人員稍後應如何使用擴充器。我們可以使用它來確定應該呼叫哪些屬性以及如何將內容傳遞給擴充器（在我們的範例中為 HTML 內容）。 在目前狀態下，TypeScript 類型檢查可能也會發生錯誤。這需要修復並完全實施擴展器，包括視覺要求，使用相應的故事作為案例研究。完整的實作可以在GitHub 專案中查看。 這裡介紹的故事最初與範例資料緊密相關，但可以根據故事書文檔進行配置。本質上，必須確定哪些控制項應該顯示哪些值，以便在 Storybook 中進行配置（以下程式碼範例 當然，在成功實現擴展器的所有要求期間以及之後，這些都可以在 Storybook 中互動式體驗（見下圖）。

影片播放器 00:00 00:28 故事書的更多功能 在這種形式下，當然可以將額外的控制項新增 沙烏地阿拉伯 電話號碼 到真實的元件庫中，並且所有這些控制項都可以清晰地、互動式地試用。光是這一點就讓 Storybook 成為 UI 開發人員非常強大的工具。除了此處顯示的功能之外，還有許多隨 Storybook 一起提供或可以稍後添加的擴充功能： 可訪問性：用於測試網路上的可訪問性標準 設計：透過在平行面板中顯示外部設計網站（例如Figma、Zeplin、Adob​​​​e XD ）來更好的設計開發流程 Pseudo States：可以透過按鈕直接啟動的 CSS 偽狀態，例如文件：可以使用 Markdown 元件記錄其屬性和可能的​​用途 特別是，在實現我們的設計系統時，我們希望使用Docs插件（作為 Storybook 版本 5 和 6 的一部分，它進入了工具的核心）。





設計系統的內容 我們假設整個元件庫是透過剛才描述的流程實現的，然後作為 NPM 套件部署在整個組織中。那裡使用的故事並不是對圖書館的所有使用者都感興趣，但只要稍加準備，它們就會成為設計系統中的重要元素。 設計系統可以根據其方向和目標傳達各種各樣的內容。作為典型組件的範例，我們的設計系統應包含以下內容： 簡介：一般介紹，為所有利害關係人提供設計系統的目標、初始方向或安裝說明 設計指南：風格指南中的基本定義，不能直接透過程式碼工具或背景資訊來證明定義的合理性，例如使用研究和由此產生的預定原則，例如應用程式的每一頁上只出現一個“確認” 。 General：原始值和元素的描述，也可以用程式碼表示，例如圖示、間距、字體、指定佈局 控制項：作為元件庫一部分的特定控制項的詳細描述，例如我們的擴充器 聯絡人：框架開發人員的聯絡選項 。