CSS: tree-browser ​

.instui-tree-browser — یک درخت افشاگرانه از مجموعه‌های تو در تو و آیتم‌های برگ، با شِورون‌های چرخان.

هر مجموعه یک <details> بومی است؛ تو در تو کردن آن‌ها درون هم درخت را می‌سازد و مرورگر باز و بسته کردن هر شاخه را مدیریت می‌کند.

Source: tree-browser.css

دسترس‌پذیری ​

ریشه را با role="tree" علامت‌گذاری کنید و هر لیست تو در تو را با role="group".

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

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tree-browser.css";

نمونه‌ها ​

html
<div class="instui-tree-browser" role="tree">
  <details open>
    <summary><span class="instui-icon -icon-folder"></span> Course files</summary>
    <ul role="group">
      <li>
        <a class="item" href="#"><span class="instui-icon -icon-file-text"></span> Syllabus.pdf</a>
      </li>
      <li>
        <details>
          <summary><span class="instui-icon -icon-folder"></span> Week 1</summary>
          <ul role="group">
            <li>
              <a class="item -selected" href="#"><span class="instui-icon -icon-file-text"></span> Reading.pdf</a>
            </li>
            <li>
              <a class="item" href="#"><span class="instui-icon -icon-file-text"></span> Slides.pptx</a>
            </li>
          </ul>
        </details>
      </li>
      <li>
        <a class="item" href="#"><span class="instui-icon -icon-file-text"></span> Rubric.docx</a>
      </li>
    </ul>
  </details>
</div>

ساختار ​

text
.instui-tree-browser
  details
    summary
      [class*="-icon-"] (0..1)
    ul
      li
        side-nav-bar.item (component)
          [class*="-icon-"] (0..1)
flowchart TD n0[".instui-tree-browser"]:::cssdoc-root n1("details"):::cssdoc-part n2("summary"):::cssdoc-part n3("[class*=&quot;-icon-&quot;]"):::cssdoc-part n4("ul"):::cssdoc-part n5("li"):::cssdoc-part n6(["side-nav-bar.item"]):::cssdoc-component n7("[class*=&quot;-icon-&quot;]"):::cssdoc-part n2 -.->|0..1| n3 n1 --> n2 n6 -.->|0..1| n7 n5 --> n6 n4 --> n5 n1 --> n4 n0 --> n1 click n6 "/api/css/side-nav-bar.item.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;

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

تعدیل‌کنندهتوضیحات
.-icon-*نمادهای پوشه/فایل را در خلاصه‌ها و آیتم‌های برگ رندر کنید.
.-size-largeبزرگ. نام طولانی‌ترِ -size-lg.
.-size-lgبزرگ.
.-size-smکوچک.
.-size-smallکوچک. نام طولانی‌ترِ -size-sm.

قسمت‌ها ​

قسمتتوضیحات
.itemیک ورودی برگ در درخت.

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

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

حالت‌ها ​

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

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

Tokenنوعمقدار
--instui-component-tree-browser-border-radius<length>0.5rem
--instui-component-tree-browser-tree-button-base-spacing-large<length>1rem
--instui-component-tree-browser-tree-button-base-spacing-medium<length>0.75rem
--instui-component-tree-browser-tree-button-base-spacing-small<length>0.5rem
--instui-component-tree-browser-tree-button-border-radius<length>0.5rem
--instui-component-tree-browser-tree-button-hover-background-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tree-browser-tree-button-hover-text-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tree-browser-tree-button-icons-margin-right-medium<length>0.5rem
--instui-component-tree-browser-tree-button-name-font-size-large<length>1rem
--instui-component-tree-browser-tree-button-name-font-size-medium<length>0.875rem
--instui-component-tree-browser-tree-button-name-font-size-small<length>0.75rem
--instui-component-tree-browser-tree-button-name-text-color<color>LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-tree-browser-tree-button-selected-background-color<color>LightDarklight-dark(#4A5B68, #576773)
--instui-component-tree-browser-tree-button-selected-text-color<color>#ffffff
--instui-component-tree-browser-tree-button-text-line-height<percentage>125%
--instui-component-tree-browser-tree-collection-base-spacing-medium<length>0.75rem
--instui-component-tree-browser-tree-collection-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--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')

زیرمولفه‌ها ​

مرتبط ​

  • menu — هر دو ورودی‌های تو در تو و قابل انتخاب را ارائه می‌دهند.