概略說明如何建構回應式、可自動調整且易於使用的複選元件,以便排序及篩選使用者體驗。
在這篇文章中,我想分享構思如何建立複選元件的方法。試試 demo」。
如果您喜歡看影片,請參考這篇文章的 YouTube 版本:
總覽
使用者往往會在商品中看到「許多」項目, 建議您提供降低清單 選項超載。這個 網誌文章介紹篩選使用者介面,藉此減少選擇數量。做法是 顯示項目屬性,使用者可選擇或取消選取,以減少結果 進而減少選項過載情形
互動
目標是為所有使用者及其使用者
各種不同的輸入類型這個過程會採用可靈活調整的回應式設計
一組元件桌面、鍵盤適用的傳統核取方塊側欄
和螢幕閱讀器,以及 <select
multiple>
為使用者提供更便利的體驗
採用內建的觸控複選功能 (不適用於電腦) 可節省工作和建立工作,但我認為相較於在單一元件中建構完整的回應式體驗,我認為提供適當的體驗,而不是建構完整的回應式體驗。
觸控
觸控元件可節省空間,並可提高使用者在
行動裝置。將整個側欄收合到核取方塊,藉此節省空間
<select>
內建重疊觸控體驗。這有助於
系統提供大型觸控疊加層體驗。
鍵盤和遊戲手把
以下示範如何透過鍵盤使用 <select multiple>
。
這個內建複選功能無法設定樣式,且只有精簡型 不適合呈現許多選項看看你如何辦到這一點 在這個小方塊中,選擇範圍相當廣泛雖然您可以變更大小 但還是無法做為核取方塊側欄使用。
標記
這兩個元件將包含在相同的 <form>
元素中。針對
無論是勾選或複選題,系統都會觀察並用於
篩選網格,但也可以提交至伺服器。
<form>
</form>
核取方塊元件
核取方塊群組應該包含在
<fieldset>
敬上
並將
<legend>
。
以這種方式建構 HTML 時,螢幕閱讀器
FormData 將
即可自動瞭解元素之間的關係
<form>
<fieldset>
<legend>New</legend>
… checkboxes …
</fieldset>
</form>
分組後,請為以下項目新增 <label>
和 <input type="checkbox">
:
。我選擇將礦場納入 <div>
,以便 CSS gap
資源
可以均勻地間距,並在標籤多行時保持對齊。
<form>
<fieldset>
<legend>New</legend>
<div>
<input type="checkbox" id="last 30 days" name="new" value="last 30 days">
<label for="last 30 days">Last 30 Days</label>
</div>
<div>
<input type="checkbox" id="last 6 months" name="new" value="last 6 months">
<label for="last 6 months">Last 6 Months</label>
</div>
</fieldset>
</form>
<select multiple>
元件
<select>
元素僅有一小部分的功能如下:
multiple
。
這項屬性與 <select>
元素搭配使用時,使用者可以
請從清單中選擇多個就像從電台清單中變更互動方式一樣
勾選為核取方塊
<form>
<select multiple="true" title="Filter results by category">
…
</select>
</form>
如要在 <select>
中加上標籤及建立群組,請使用
<optgroup>
元素,並提供 label
屬性和值。這個元素和屬性
值與 <fieldset>
和 <legend>
元素類似。
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
…
</optgroup>
</select>
</form>
現在將
<option>
敬上
元素。
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
<option value="last 30 days">Last 30 Days</option>
<option value="last 6 months">Last 6 Months</option>
</optgroup>
</select>
</form>
使用計數器追蹤輸入內容,為輔助技術提供資訊
狀態
角色
持續運用這方面的技術,藉此追蹤並維護
篩選器和其他輔助技術。YouTube 影片
即可示範這項功能整合作業開頭為 HTML 和屬性
role="status"
。
<div role="status" class="sr-only" id="applied-filters"></div>
這個元素會大聲朗讀變更內容。我們可以更新 透過 CSS 供應商提供的內容 計數器 則可記錄使用者的互動情形如要這麼做,我們必須先建立 的計數器和狀態元素名稱。
aside {
counter-reset: filters;
}
根據預設,計數為 0
,太好了,結果沒有任何 :checked
預設用途
接著,為了增加新建的計數器,我們會指定
屬於 :checked
的 <aside>
元素。使用者變更輸入狀態時
filters
計數器會計算。
aside :checked {
counter-increment: filters;
}
CSS 現已採用核取方塊使用者介面和狀態角色的一般計分
元素空白且正在等待值。因為 CSS 供應商
記憶體
counter()
敬上
函式可讓您從虛擬
元素內容:
aside #applied-filters::before {
content: counter(filters) " filters ";
}
狀態角色元素的 HTML 現在將會宣告「2 個篩選器」所需畫面 讀取器。這是好的開始,但我們也可以做得更好, 篩選器已更新我們將透過 JavaScript 進行這項操作 而不是計數器所能辦到的
建立巢狀結構的興奮感
使用 CSS 供應商提供的計數器演算法展現絕佳成果 nesting-1,因為我可以將所有 拆分為單一區塊方便集中閱讀及更新。
aside {
counter-reset: filters;
& :checked {
counter-increment: filters;
}
& #applied-filters::before {
content: counter(filters) " filters ";
}
}
版面配置
本節將說明兩個元件之間的版面配置。大部分 版面配置樣式適用於電腦核取方塊元件。
表單
為了提供使用者最佳易讀性和瀏覽便利性,表單的數量上限
寬度為 30 個半形字元,基本上會為每個線條設定光學線寬度
篩選標籤。表單會使用格線版面配置和 gap
屬性,將
欄位集。
form {
display: grid;
gap: 2ch;
max-inline-size: 30ch;
}
<select>
元素
標籤清單和核取方塊都會在行動裝置上佔用過多空間。 因此,版面配置會檢查使用者的主要指標,確認要變更的裝置 使用者的觸控體驗
@media (pointer: coarse) {
select[multiple] {
display: block;
}
}
如果值為 coarse
,則表示使用者無法與其互動
並透過主要輸入裝置,提高螢幕精確度。使用
行動裝置,指標值通常為 coarse
,做為主要互動
是輕觸的。在電腦裝置上,指標值通常為 fine
,因為這是很常見的情況
連接滑鼠或其他高精確度輸入裝置。
欄位集
<fieldset>
包含 <legend>
的預設樣式和版面配置如下:
一般而言,為了使子項元素得到空格,我會使用 gap
屬性,但是不重複值
<legend>
的位置會導致建立均勻的間距集
因此必須瞭解兒童而不是 gap
,相鄰的同層級
選取工具
使用的是 margin-block-start
。
fieldset {
padding: 2ch;
& > div + div {
margin-block-start: 2ch;
}
}
這項設定會略過<legend>
,因為只要指定
<div>
位兒童。
篩選器標籤和核取方塊
做為 <fieldset>
的直接子項,且不超過表單的寬度上限
30ch
,如果標籤文字過長,可能會自動換行。換行固然很好
文字和核取方塊之間沒有衝突。Flexbox 正是理想的選擇。
fieldset > div {
display: flex;
gap: 2ch;
align-items: baseline;
}
![顯示勾號對齊方式的螢幕截圖
在多行換行情境中的第一行文字。](https://web.developers.google.cn/static/articles/building/a-multi-select-component/image/screenshot-showing-the-c-b135285ef7d8a.png?authuser=19&hl=zh-tw)
動畫格線
版面配置動畫是由 Isotope 進行。A 罩杯 成效卓越且強大的外掛程式,支援互動排序及篩選。
JavaScript
除了協助安排流暢的互動式動畫、互動式網格、JavaScript 內容 它會用來修飾兩個粗略的邊緣
將使用者輸入內容標準化
這項設計採用一種形式,包含兩種提供輸入內容的方式 請勿 序列化 完全一樣。不過在某些 JavaScript 中 將資料正規化。
我選擇將 <select>
元素資料結構與已分組的核取方塊對齊
成本中心的架構如要這麼做,
input
敬上
事件監聽器會新增至 <select>
元素,
selectedOptions
物件之間會對應各個項目。
document.querySelector('select').addEventListener('input', event => {
// make selectedOptions iterable then reduce a new array object
let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
// parent optgroup label and option value are added to the reduce aggregator
data.push([opt.parentElement.label.toLowerCase(), opt.value])
return data
}, [])
})
您可以放心提交表單了;如果是示範影片,請指示 Isotope 篩選依據
完成狀態角色元素
元素只會根據核取方塊統計及宣告篩選器數量
但我覺得同樣地
結果,並確保系統也計算 <select>
元素選項。
counter()
已反映 <select>
個元素選項
在資料正規化部分中,我們已根據輸入建立事件監聽器。在 此函式結尾處代表所選篩選器的數量和結果數量 知道這些篩選器代表的意義這些值可傳送至狀態角色元素 就像這樣
let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length
role="status"
元素中反映的結果
:checked
提供內建方法,能將所選數量的數個篩選器傳遞至
狀態角色元素,但無法查看篩選後的結果數量。
JavaScript 可以監控與核取方塊的互動,且在篩選後
格線,加入 textContent
,就像 <select>
元素一樣。
document
.querySelector('aside form')
.addEventListener('input', e => {
// isotope demo code
let filterResults = IsotopeGrid.getFilteredItemElements().length
document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})
整體來說,這項工作完成了公告「2 個篩選條件,產生 25 筆結果」。
現在,我們卓越的輔助技術將能 但會與內容互動
結論
現在你知道我怎麼了,這樣會如何 🙂?
讓我們來體驗多元的方法,瞭解透過網路建立內容的所有方式。 建立示範、將 Twitter 推文連結,我們就會為您新增 前往下方的社群重混專區!
社群重混作品
這裡還沒有任何資訊!