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 gradient.
.-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Ορίστε ως προεπιλογή για κάθε μη τροποποιημένο παιδί τη μεταχείριση 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, η σελίδα κάνει οριζόντια κύλιση (έχει πλάτος 592px σε παράθυρο 320px)), και ένα στοιχείο εκτείνεται πέρα από το δεξί άκρο: button.instui-button τελειώνει στα 592px. Το WCAG 1.4.10 Αναδίπλωση (επίπεδο AA) εξαιρεί περιεχόμενο δύο διαστάσεων, όπως πίνακες δεδομένων και χάρτες, επομένως πρέπει να κρίνει κανείς αν αυτό ισχύει.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Αναγνώστης οθόνης (προσομοιωμένος)Επανασχεδιασμός (ανοιχτό)Επανασχεδιασμός (σκούρο)CanvasCanvas υψηλής αντίθεσης
AnnouncementsPassPassPassPass

Αυτά τα αυτοματοποιημένα αποτελέσματα δεν αποδεικνύουν ότι η σελίδα συμμορφώνεται με το WCAG· εξακολουθεί να απαιτείται μη αυτόματος έλεγχος.

Καταναλωμένα tokens ​

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 — Το κουμπί απόρριψης μόνο με εικονίδιο.