CSS: button-set ​

.instui-button-set — एक सिलवाया हुआ (सपाट, शून्य-श्लेष) बटन पंक्ति, जिसकी केवल बाहरी दो कोने गोल किए गए हैं.

Its own chained modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) ग्रुप के लिए डिफ़ॉल्ट सेट करते हैं उन प्रत्येक बच्चे के लिए .instui-button जिनके पास उसी श्रेणी में अपना मॉडिफायर नहीं है — किसी बटन का अपना मॉडिफायर क्लास हमेशा समूह के डिफ़ॉल्ट पर भारी पड़ता है। -icon-* हमेशा प्रति-बटन होता है; इसे कभी समूह से पढ़ा नहीं जाता। प्रतिबंधित बटन उपनाम (-ghost, -color-primary-inverse) ) समूह-स्तरीय मॉडिफायर के रूप में समर्थित नहीं हैं — इनके canonical प्रतिस्थापनों का उपयोग करें (-color-tertiary, -on-color) के बजाय).

उपयोग ​

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

उदाहरण ​

html
<div class="instui-button-set -size-sm -toggle">
  <button class="instui-button">बाएँ</button>
  <button class="instui-button">light</button>
</div>

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>

संरचना ​

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हर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से सघन पैडिंग सेट करें.
.-display-blockहर अपरिवर्तित बच्चे को पूर्ण-चौड़ाई पर लेआउट करें.
.-on-colorहर अपरिवर्तित बच्चे को रंगीन सतह पर रखने के अनुसार डिफ़ॉल्ट करें.
.-shape-circleहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से गोल आइकन बटन बनाएं.
.-shape-squareहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से वर्गाकार आइकन बटन बनाएं.
.-size-lgहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से बड़ा करें.
.-size-md(डिफ़ॉल्ट) मध्यम आकार।
.-size-smहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से छोटा करें.
.-toggleहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से दबाए गए-स्थिति टॉगल उपचार दें.
.-without-backgroundहर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से बिना भरे सेट करें.
.-without-borderहर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से बिना बॉर्डर सेट करें.

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::after—
::before—

स्टेट्स ​

स्थितिविवरण
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

उपयोग किये गए टोकन ​

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

सबकम्पोनेन्ट्स ​

संबंधित ​

  • close-button — आइकन-ओनली डिस्मिस बटन।