CSS: toggle-group ​

.instui-toggle-group — <details> पर बनाया गया एक बॉर्डर वाला डिस्क्लोज़र: एक शेवरॉन सारांश पंक्ति और संकुचित सामग्री।

toggle-details के समान नेटिव <details> आधार पर बनाया गया; <summary> को पहले रखें ताकि वह क्लिक करने योग्य हेडर पंक्ति बन जाए और बाकी संकुचित सामग्री बन जाए।

Source: toggle-group.css

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/toggle-group.css";

उदाहरण ​

html
<details class="instui-toggle-group" open>
  <summary>उन्नत सेटिंग्स</summary>
  <div>ये विकल्प तब प्रदर्शित होते हैं जब समूह विस्तारित किया जाता है। हेडर पंक्ति में एक चिवरॉन होता है जो खोलने पर घूमता है, और सामग्री एक विभेदक के नीचे स्थित होती है।</div>
</details>

संरचना ​

text
.instui-toggle-group
  summary
  div
flowchart TD n0[".instui-toggle-group"]:::cssdoc-root n1("summary"):::cssdoc-part n2("div"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-size-largeबड़ा। -size-lg का लंबा-फॉर्म उपनाम।
.-size-lgबड़ा।
.-size-smछोटा।
.-size-smallछोटा। -size-sm का लंबा-फॉर्म उपनाम।
.-without-borderबॉर्डर निकालें।

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

स्यूडो-एलिमेंटविवरण
::beforeसारांश पंक्ति का डिस्क्लोज़र शेवरॉन दर्शाता है, एक मास्क किया हुआ ग्लिफ़ जो समूह खुलने पर नीचे की ओर संकेत करने के लिए घूमता है।

स्टेट्स ​

स्थितिविवरण
:state(open)—

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

Tokenप्रकारमान
--instui-border-radius-md<length>0.5rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-toggle-details-content-padding-large<length>1.375rem
--instui-component-toggle-details-content-padding-medium<length>1.125rem
--instui-component-toggle-details-content-padding-small<length>1.125rem
--instui-component-toggle-details-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-toggle-details-font-size-large<length>1.25rem
--instui-component-toggle-details-font-size-medium<length>1rem
--instui-component-toggle-details-font-size-small<length>0.875rem
--instui-component-toggle-details-font-weight<integer>400
--instui-component-toggle-details-icon-margin<length>0.375rem
--instui-component-toggle-details-line-height<percentage>150%
--instui-component-toggle-details-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-toggle-group-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-icon-chevron-right<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')

संबंधित ​

  • toggle-details — उसी डिस्क्लोज़र का एकल, बिना बॉर्डर वाला रूप।