CSS: button-set ​

.instui-button-set — Բացման չունեցող (flush, zero-gap) կոճակների տող, որի միայն դրսային երկու անկյունները բլանկ են։

Սեփական շղթայված փոփոխիչները (-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Բոլոր անփոփոխ երեխաներին կանխադրված դարձնել հիմնական գույնով։
.-color-secondaryԲոլոր անփոփոխ երեխաներին կանխադրված դարձնել երկրորդական գույնով։
.-color-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)Բրենդի փոփոխություն (բաց)Բրենդի փոփոխություն (մուգ)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

Վերաբրենդավորում (բաց): 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 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 — միայն իկոնով dismiss կոճակը։