設定表單之可顯隱群組(節點/連線設定 popup 共用)。
互動契約(同類產品之通用作法, 見 https://en.wikipedia.org/wiki/Disclosure_widget): 三角形朝右 = 收合、朝下 = 展開 —— 符號表示「目前狀態」而非「按下去會怎樣」(macOS / Finder / Xcode 一路的 disclosure triangle 語義); 展開時以 rotate(90deg) 由朝右轉為朝下, 狀態切換有連續性。 整條標題列(三角形 + 標題)皆為可點區, 非只有三角形。
無障礙結構依 W3C ARIA APG accordion pattern(https://www.w3.org/WAI/ARIA/apg/patterns/accordion/): 標題按鈕包在 role="heading"(aria-level 由 headingLevel 指定)內, 按鈕帶 aria-expanded / aria-controls, 內容區帶 role="region" 與 aria-labelledby。button 原生即可被 Tab 聚焦、Enter/Space 觸發, 不需另掛鍵盤處理。
收合以「height:0 + visibility:hidden」而非 display:none: 內容仍參與寬度計算, popup 寬度不隨展開/收合跳動; visibility:hidden 同時使收合內容不可被 Tab 聚焦。刻意不做高度過場動畫 —— popup 由 popper 定位, 高度逐幀變動會讓整個 popup 在動畫期間持續位移; 狀態連續性改由三角形旋轉表達。
展開態由呼叫端持有(:open + @update:open, 即 :open.sync), 使宿主可決定預設展開哪幾群、是否記憶。
- Description:
設定表單之可顯隱群組(節點/連線設定 popup 共用)。
互動契約(同類產品之通用作法, 見 https://en.wikipedia.org/wiki/Disclosure_widget): 三角形朝右 = 收合、朝下 = 展開 —— 符號表示「目前狀態」而非「按下去會怎樣」(macOS / Finder / Xcode 一路的 disclosure triangle 語義); 展開時以 rotate(90deg) 由朝右轉為朝下, 狀態切換有連續性。 整條標題列(三角形 + 標題)皆為可點區, 非只有三角形。
無障礙結構依 W3C ARIA APG accordion pattern(https://www.w3.org/WAI/ARIA/apg/patterns/accordion/): 標題按鈕包在 role="heading"(aria-level 由 headingLevel 指定)內, 按鈕帶 aria-expanded / aria-controls, 內容區帶 role="region" 與 aria-labelledby。button 原生即可被 Tab 聚焦、Enter/Space 觸發, 不需另掛鍵盤處理。
收合以「height:0 + visibility:hidden」而非 display:none: 內容仍參與寬度計算, popup 寬度不隨展開/收合跳動; visibility:hidden 同時使收合內容不可被 Tab 聚焦。刻意不做高度過場動畫 —— popup 由 popper 定位, 高度逐幀變動會讓整個 popup 在動畫期間持續位移; 狀態連續性改由三角形旋轉表達。
展開態由呼叫端持有(:open + @update:open, 即 :open.sync), 使宿主可決定預設展開哪幾群、是否記憶。
- Source: