如何元件 – 總覽

操作說明元件

「操作說明:元件」是一組實作常見 UI 模式的網頁元件。這些實作程序旨在提供教育資源。 您可以詳細閱讀不同元件的稠密實作實作,並盡可能從這些元件中學習。請注意,這些程式庫「不是」UI 程式庫,因此「不得」用於實際工作環境。

元件

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

目標

我們的目標是示範編寫實用元件的最佳做法,確保這些元件易於存取、效能良好、可維護且易於設定。每個元件都是完全獨立的,因此可以做為參照實作。

無障礙功能

這些元件務必遵守 WAI ARIA 編寫做法,其中說明如何說明並顯示可存取的豐富網際網路應用程式標準 ARIA。如果您不熟悉 ARIA,請參閱 WebFundamentals 簡介。每個元件都會連結至《撰寫實務》的相關章節。雖然並非必要,但建議您先閱讀編寫練習中的章節,再深入探討程式碼。

效能

在網頁開發中,「效能」一詞可適用於許多方面。在 <howto> 中,效能主要是指持續以 60fps 執行動畫,即使在行動裝置上也是如此。

富有彈性

請盡可能不調整元件樣式,除了版面配置以外,也沒有指出所選或進行中的狀態。這是為了保持實作的視覺彈性和聚焦性。我們不用花時間進行裝飾,就是將程式碼限制為只執行元件功能絕對必要的項目。如果元件需要任何樣式才能運作,樣式會標上說明原因的註解。

可維護的程式碼

HowTo: 元件是一種參考實作,因此我們花了更多時間編寫易讀且容易理解的程式碼,其中加上備註。

Non-Goal

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

<howto> 元件並非在 npm、Booll 或其他平台上發布,因為這些元件並不適用於實際工作環境。為使運作、可閱讀的程式碼,我們使用的是新型 JavaScript API,並支援採用網頁元件標準的新型瀏覽器。閱讀這些實作方法後,您就可以根據自己的需求調整程式碼。

與回溯相容

請勿直接仰賴程式碼。如果我們發現了更好的實作,我們可能會大幅變更任何元素的實作和 API。這是一項常態資源,我們可以分享、探索並討論建構網頁 UI 的最佳做法。

完成

我們目前並未實作 (也可能不會) 實作 WAI ARIA 編寫做法中的 *所有 *元件。不過,重複使用其他 <howto> 元件中使用的原則,應該能讓讀者實作缺少的元件。