CSS: toggle-details ​

.instui-toggle-details — یک عنصر بازشوندهٔ بومی استایل‌دار <details> با یک شِورون چرخان.

بر پایهٔ عنصر بومی <details> ساخته شده است، بنابراین مرورگر باز/بسته‌شدن و پشتیبانی صفحه‌کلید را کنترل می‌کند؛ CSS فقط نشانگر پیش‌فرض را مخفی می‌کند و شِورون چرخان را فراهم می‌آورد.

Source: toggle-details.css

نحوه استفاده ​

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

نمونه‌ها ​

html
<details class="instui-toggle-details" open>
  <summary>What ships in this package?</summary>
  Class-based component styles, built from the Instructure tokens, plus a prose layer.
</details>

ساختار ​

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

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-chevron-endشِورون را بعد از summary قرار دهید.
.-size-largeبزرگ. نام طولانی‌ترِ -size-lg.
.-size-lgبزرگ.
.-size-smکوچک.
.-size-smallکوچک. نام طولانی‌ترِ -size-sm.
.-variant-filledنسخهٔ پُر‌شده (سطح).

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::beforeشِورون افشای summary را رسم می‌کند؛ این یک گلیف ماسک‌شده است که وقتی پنل بازشونده باز است می‌چرخد و به سمت پایین اشاره می‌کند.

حالت‌ها ​

وضعیتتوضیحات
:state(open)—

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-color-background-interactive-action-secondary-base<color>LightDarklight-dark(#44709F, #345B84)
--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-details-toggle-border-radius<length>0.75rem
--instui-component-toggle-details-toggle-padding<length>0.375rem
--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-group — فرم گروه‌بندی‌شده و دارای حاشیهٔ همان پنل بازشونده.