如何元件 – 總覽

教學元件

「操作說明:元件」是一組實作常見 UI 的網頁元件 例如模式這些實作項目是為了教育資源。 您可以閱讀各個類別 並從中學習請注意,這些變數明確不會 UI 程式庫,且不得用於實際工作環境。

  • <howto-checkbox>:代表表單中的布林值選項。最常見的是 核取方塊是雙重類型,可讓使用者在兩個選項之間切換:已勾選和未勾選。
  • <howto-tabs>:將顯示內容分成多個面板,藉此限制顯示的內容。
  • <howto-tooltip>:在元素出現時,顯示元素相關資訊的彈出式視窗 收到鍵盤焦點或滑鼠遊標懸停在上。

我們的目標是示範編寫完善元件的最佳做法, 方便好用、效能高、易於維護且設計容易。每個元件都是 並用作參考實作

無障礙設定

元件必須密切遵循 WAI ARIA 編寫 做法:這份指南 解釋並顯示 ARIA,這是易於存取的豐富網際網路應用程式 標準。如果不熟悉 ARIA, 請前往說明中心查看 WebFundamentals。 每個元件都會連結至編寫做法的相關章節。雖然 有鑑於此,我們建議您閱讀 實作程式碼之前的練習。

成效

在網路開發中,「效能」一詞可套用至 有些事物就 <howto> 而言,效能主要是指動畫 持續 60 FPS 執行,甚至在行動裝置上

視覺化彈性

請盡可能讓元件設定樣式,除了版面配置或用於指出 會處於所選或有效狀態這是為了讓實作看起來富有彈性 且焦點明確由於我們不花時間裝飾裝飾,因此將程式碼的範圍限制在 是讓元件函式的必要函式是否需要任何樣式 為了讓元件正常運作,樣式會以註解標記 解釋原因

可維護的程式碼

如 HowTo:元件是一個參照 我們投入更多時間,撰寫易讀又容易理解的內容 且內容密集加註

Non-Goal

成為程式庫 / 架構 / 工具包

<howto> 元件未發布於 npm、Beater 或任何其他平台 因為這類物件不會用在正式環境為了方便說 因此,我們採用新型 JavaScript API,並支援新型程式碼, 導入 Web 元件標準的瀏覽器。個人中心 並根據您的需求調整程式碼 。

具回溯相容性

請勿直接依賴程式碼,我們也可能 大幅變更任何元素的實作和 API 隨時可用。我們可以透過這個即時資源分享 探索及討論建構網路 UI 的最佳做法。

提供完整資訊

我們目前不會 (也可能不會) 實作「所有」*可自訂的元件 該文件。不過,重複使用內部 AI 開發原則 其他 <howto> 元件中的元件應能讓讀取器實作任何元件 與缺少的鍵結