CSS: button-set

.instui-button-set — Μια συνεχής (εφαπτόμενη, χωρίς κενά) σειρά κουμπιών, με στρογγυλεμένες μόνο τις δύο εξωτερικές γωνίες.

Its own chained modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) ορίζουν προεπιλογή για κάθε παιδί .instui-button .instui-button που δεν έχει τον δικό του τροποιητή στην ίδια κατηγορία — η κλάση τροποιητή του κουμπιού υπερισχύει πάντα της προεπιλογής της ομάδας. -icon-* είναι πάντα ανά κουμπί· δεν διαβάζεται ποτέ από την ομάδα. Οι απαρχαιωμένες αλχημείες κουμπιών (-ghost, -color-primary-inverse) ) δεν υποστηρίζονται ως τροποιητές σε επίπεδο ομάδας — χρησιμοποιήστε τους κανονικούς αντικαταστάτες τους (-color-tertiary, -on-color) αντί γι' αυτούς).

Χρήση

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

Παραδείγματα

<div class="instui-button-set -size-sm -toggle">
  <button class="instui-button">Αριστερά</button>
  <button class="instui-button">light</button>
</div>

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Ακύρωση</button>
  <button class="instui-button -color-primary -icon-checkmark">Επιβεβαίωση</button>
</div>

Δομή

.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	Ορίστε ως προεπιλογή για κάθε μη τροποποιημένο παιδί χωρίς περίγραμμα.

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::after	—
::before	—

Καταστάσεις

Κατάσταση	Περιγραφή
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Καταναλωμένα 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>	LightDarklight-dark(#44709f26, #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>	LightDarklight-dark(#44709f00, #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(#DFE1E3, #334450)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-primary-ghost-active-background	<color>	LightDarklight-dark(#1d354f33, #eef4fd33)
--instui-component-base-button-primary-ghost-background	<color>	transparent
--instui-component-base-button-primary-ghost-border-color	<color>	LightDarklight-dark(#1d354f66, #eef4fd66)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	<color>	LightDarklight-dark(#1d354f1a, #eef4fd1a)
--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>	LightDarklight-dark(#3d658f33, #6c95cc4d)
--instui-component-base-button-secondary-active-border-color	<color>	LightDarklight-dark(#44709f00, #86a8d500)
--instui-component-base-button-secondary-active-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background	<color>	LightDarklight-dark(#44709F33, #86A8D5)
--instui-component-base-button-secondary-border-color	<color>	LightDarklight-dark(#44709f00, #86a8d500)
--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>	LightDarklight-dark(#4d7eb333, #92b1d94d)
--instui-component-base-button-secondary-hover-border-color	<color>	LightDarklight-dark(#44709f00, #86a8d500)
--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>	LightDarklight-dark(#1d354f4d, #eef4fd4d)
--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>	LightDarklight-dark(#1d354f33, #eef4fd33)
--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

Υποσυστατικά

• button

Σχετιζόμενα

• close-button — Το κουμπί απόρριψης μόνο με εικονίδιο.