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) هر اتصال، در رنگ حاشیهٔ خود دکمه‌ها یک درز ۱ پیکسلی ایجاد می‌کند (در زمینه‌های یکدست، رنگ حاشیه با رنگ زمینه یکی است و این درز با رنگ برچسب رنگ‌آمیزی می‌شود). -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"> هفته ۱</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پیش‌فرض هر فرزند بدون مودیفایر را به رنگ اصلی اختصاص دهید.
.-color-secondaryپیش‌فرض هر فرزند بدون مودیفایر را به رنگ ثانویه اختصاص دهید.
.-color-successپیش‌فرض هر فرزند بدون مودیفایر را به رنگ موفقیت اختصاص دهید.
.-color-tertiaryپیش‌فرض همه فرزندانی که تغییر نکرده‌اند را به رنگ ثالث (text-style) رنگ.
.-condensedپیش‌فرض هر فرزند بدون مودیفایر را به فاصلهٔ داخلی تنگ‌تر اختصاص دهید.
.-display-blockهر فرزند بدون مودیفایر را به‌صورت تمام‌عرض قرار دهید.
.-on-colorپیش‌فرض هر فرزند بدون مودیفایر را برای قرارگیری روی سطح رنگی اختصاص دهید.
.-shape-circleپیش‌فرض هر فرزند بدون مودیفایر را به دکمهٔ آیکون گرد اختصاص دهید.
.-shape-squareپیش‌فرض هر فرزند بدون مودیفایر را به دکمهٔ آیکون مربعی اختصاص دهید.
.-size-lgپیش‌فرض هر فرزند بدون مودیفایر را به اندازهٔ بزرگ اختصاص دهید.
.-size-md(پیش‌فرض) اندازهٔ متوسط.
.-size-smپیش‌فرض هر فرزند بدون مودیفایر را به اندازهٔ کوچک اختصاص دهید.
.-toggleپیش‌فرض هر فرزند بدون مودیفایر را به حالت تغییر وضعیت فشرده اختصاص دهید.
.-without-backgroundپیش‌فرض هر فرزند بدون مودیفایر را به حالت بدون پر کردن اختصاص دهید.
.-without-borderپیش‌فرض هر فرزند بدون مودیفایر را به حالت بدون حاشیه اختصاص دهید.
.-without-seamدرز 1px بین دکمه‌ها را پنهان کنید.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::after—
::before—

حالت‌ها ​

وضعیتتوضیحات
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

دسترس‌پذیری ​

برای کنش‌های مرتبط از یک گروه برچسب‌دار استفاده کنید؛ اگر دکمه‌ها گزینه‌های تغییر وضعیت را نشان می‌دهند، وضعیت هرکدام را با aria-pressed اعلام کنید. برای دکمه‌های فقط‌آیکون نامی دسترس‌پذیر تعیین کنید. ماشه‌های نیم‌عرض هدف‌های باریکی هستند (۱۶px، ۲۰px یا ۲۴px در اندازه‌های استاندارد); فاصلهٔ کافی بین هدف‌ها در نظر بگیرید یا در رابط‌های لمسی از دکمهٔ مربعی با عرض کامل استفاده کنید.

قوانین (axe-core)تغییر برند (روشن)تغییر برند (تیره)Canvasبوم با کنتراست بالا
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"]
شرایطتغییر برند (روشن)تغییر برند (تیره)Canvasبوم با کنتراست بالا
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Rebrand (روشن): با prefers-contrast: more، کنتراست شش بخش از متن کمتر از حداقل مجاز است. کمترین کنتراست مربوط به «ارسال» با نسبت 1.64:1 است (حداقل باید 4.5:1 باشد).

Rebrand (تیره): با prefers-contrast: more، کنتراست شش بخش از متن کمتر از حداقل مجاز است. کمترین کنتراست مربوط به «ارسال» با نسبت 1.78:1 است (حداقل باید 4.5:1 باشد).

Canvas، Canvas High Contrast: با 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 Reflow (سطح AA) محتوای دوبعدی مانند جدول‌های داده و نقشه‌ها را مستثنا می‌کند؛ بنابراین باید بررسی شود که آیا این مورد شامل آن می‌شود یا نه.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
صفحه‌خوان (شبیه‌سازی‌شده)تغییر برند (روشن)تغییر برند (تیره)Canvasبوم با کنتراست بالا
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

زیرمولفه‌ها ​

مرتبط ​

  • close-button — دکمهٔ فقط-آیکون برای بستن.