CSS: button-set ​

.instui-button-set — 有接縫（緊貼、無間隙）的按鈕列，僅其外側兩個角為圓角。

它自己的串接修飾符（-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block)）會為每個子項設定預設值 .instui-button；若按鈕本身在相同類別中帶有修飾符，則會優先採用該修飾符。-icon-*一律設定在個別按鈕上；永遠不會從群組讀取。已棄用的按鈕別名（-ghost, -color-primary-inverse) 不支援作為群組層級修飾符；請改用其標準替代項 (-color-tertiary, -on-color)。每個接合處都會在按鈕自己的邊框顏色中顯示一道 1px 的接縫（純色填滿的按鈕，其邊框與填滿顏色相同，接縫會以標籤顏色著色). -without-seam僅適用於群組：它會隱藏接縫，讓按鈕看起來像 一個連續的控制項。 將 -width-half 加到個別的純圖示子按鈕上，可建立分割動作觸發器，其寬度為標準正方形按鈕的一半，高度則與按鈕相同。

使用方法 ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Per-button override ​

html
<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">取消</button>
  <button class="instui-button -color-primary -icon-checkmark">確認</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">天</button>
  <button class="instui-button"> 第1週</button>
  <button class="instui-button">月份</button>
</div>

Split action ​

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

html
<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">儲存變更</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

結構 ​

text
.instui-button-set
  button (component, 1..n)
flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾器 ​

修飾器說明
.-color-ai將每個未修改的子項預設為 AI 漸層處理。
.-color-ai-secondary將每個未修改的子項預設為較低強調的 AI 處理。
.-color-danger將每個未修改的子項預設為破壞性（警示）顏色。
.-color-primary將每個未修改的子項預設為主色（primary）。
.-color-secondary將每個未修改的子項預設為次要色（secondary）。
.-color-success將每個未修改的子項預設為成功色（success）。
.-color-tertiary將每個未修改的子項預設為第三色（文字風格）)。
.-condensed將每個未修改的子項預設為更緊的內距（padding）。
.-display-block將每個未修改的子項佈局為全寬。
.-on-color將每個未修改的子項預設為放置於有色表面上。
.-shape-circle將每個未修改的子項預設為圓形圖示按鈕。
.-shape-square將每個未修改的子項預設為方形圖示按鈕。
.-size-lg將每個未修改的子項預設為大型。
.-size-md（預設）中等尺寸。
.-size-sm將每個未修改的子項預設為小型。
.-toggle將每個未修改的子項預設為按下狀態的切換處理。
.-without-background將每個未修改的子項預設為無填充。
.-without-border將每個未修改的子項預設為無邊框。
.-without-seam隱藏按鈕之間的 1px 接縫。

偽元素 ​

偽元素說明
::after—
::before—

狀態 ​

狀態說明
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

無障礙 ​

相關操作請使用具標籤的群組；若按鈕代表切換選項，請使用 aria-pressed 呈現各個狀態。純圖示按鈕請提供可存取名稱。半寬觸發器的點擊目標較窄（標準尺寸為 16px、20px 或 24px)；請確保目標間距足夠，或在觸控介面使用完整寬度的正方形按鈕。

規則 (axe-core)品牌重塑（淺色)品牌重塑（深色)CanvasCanvas 高對比
color-contrastWCAG 2.2 1.4.3需要檢查需要檢查需要檢查需要檢查

元素必須符合最低色彩對比度門檻

  • .-color-ai > button:nth-child(1)
  • .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8FailFailFailFail

所有觸控目標都必須至少為 24px，或留有足夠間距

  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi...
  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi...
  • button[aria-label="More add actions"]
條件品牌重塑（淺色)品牌重塑（深色)CanvasCanvas 高對比
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3、1.4.6FailFailFailFail

重新品牌 (淺色): 在 prefers-contrast: more 的情況下，有六段文字的對比度低於最低要求。最差的是「傳送」，對比度為 1.64:1（需要 4.5:1)。

重新品牌 (深色): 在 prefers-contrast: more 的情況下，有六段文字的對比度低於最低要求。最差的是「傳送」，對比度為 1.78:1（需要 4.5:1)。

Canvas、Canvas 高對比: 在 prefers-contrast: more 的情況下，有兩段文字的對比度低於最低要求。最差的是「改寫」，對比度為 1.88:1（需要 4.5:1)。

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2不適用PassPass不適用
reduced-transparency-respectedWCAG 2.2 1.4.3、1.4.11PassPass不適用不適用
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

在 320px 的視窗中，頁面會水平捲動（在 320px 的視窗中寬度為 592px)），且有一個元素超出右側邊緣：button.instui-button 結束於 592px。WCAG 1.4.10 重排（AA 級)）豁免資料表格和地圖等二維內容，因此應由使用者判斷此豁免是否適用。

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
螢幕閱讀器（模擬)品牌重塑（淺色)品牌重塑（深色)CanvasCanvas 高對比
AnnouncementsPassPassPassPass

這些自動化結果無法證明頁面符合 WCAG；仍需進行人工檢查。

已使用的代幣 ​

Token型別值
--instui-border-width-md<length>0.125rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-ai-bottom-gradient-active<color>#01626E
--instui-color-background-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-background-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-active-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-top-gradient-active<color>#793F93
--instui-color-background-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-background-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-background-interactive-action-destructive-active<color>#AE161B
--instui-color-background-interactive-action-destructive-base<color>#CF1F24
--instui-color-background-interactive-action-destructive-hover<color>#E62429
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 15%, transparent), #2E5177)
--instui-color-background-interactive-action-success-base<color>#037D37
--instui-color-background-interactive-action-success-hover<color>#03893D
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-interactive-action-ai-bottom-gradient-active<color>LightDarklight-dark(#01626E, #02717E)
--instui-color-stroke-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-stroke-interactive-action-ai-top-gradient-active<color>LightDarklight-dark(#793F93, #8A49A7)
--instui-color-stroke-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-stroke-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 0%, transparent), #2E5177)
--instui-color-text-interactive-action-ai-active<color>#ffffff
--instui-color-text-interactive-action-ai-base<color>#ffffff
--instui-color-text-interactive-action-ai-hover<color>#ffffff
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-color-text-interactive-action-ai-secondary-top-gradient-base<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-color-text-interactive-action-secondary-base<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base<color>#ffffff
--instui-component-base-button-ai-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-font-size<length>1.125rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-large-padding-horizontal<length>1.25rem
--instui-component-base-button-medium-font-size<length>1rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-medium-padding-horizontal<length>1rem
--instui-component-base-button-primary-color<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background<color>#E2EAF7
--instui-component-base-button-primary-inverse-background<color>#ffffff
--instui-component-base-button-primary-inverse-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-color<color>#213D5B
--instui-component-base-button-primary-inverse-hover-background<color>#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color<color>#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color<color>#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color<color>#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color<color>#213D5B
--instui-component-base-button-secondary-active-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-spacing-space-xs<length>0.25rem

子元件 ​

相關 ​