src/dev-app/aria-tree/tree-demo.html - main - githubmirror/components

src/dev-app/aria-tree/tree-demo.html

58 строк2 KB

Joy Serquiña

docs(aria/tree): adds aria tree nav rtl example (#32307)

30 янв 2026, 21:05

30 янв 2026, 21:05727a11d

<div>
  <div class="example-tree-grid">
    <div class="example-tree-container">
      <h2>Multi Select with Selection Follows Focus</h2>
      <tree-multi-select-follow-focus-example></tree-multi-select-follow-focus-example>
    </div>

    <div class="example-tree-container">
      <h2>Single Select with Selection Follows Focus</h2>
      <tree-single-select-follow-focus-example></tree-single-select-follow-focus-example>
    </div>

    <div class="example-tree-container">
      <h2>Multi Select</h2>
      <tree-multi-select-example></tree-multi-select-example>
    </div>

    <div class="example-tree-container">
      <h2>Single Select</h2>
      <tree-single-select-example></tree-single-select-example>
    </div>

    <div class="example-tree-container">
      <h2>Disabled</h2>
      <tree-disabled-example></tree-disabled-example>
    </div>

    <div class="example-tree-container">
      <h2>Disabled Options are Skipped</h2>
      <tree-disabled-skipped-example></tree-disabled-skipped-example>
    </div>

    <div class="example-tree-container">
      <h2>Disabled Options are Focusable</h2>
      <tree-disabled-focusable-example></tree-disabled-focusable-example>
    </div>

    <div class="example-tree-container">
      <h2>Active Descendant</h2>
      <tree-active-descendant-example></tree-active-descendant-example>
    </div>

    <div class="example-tree-container">
      <h2>Nav Mode</h2>
      <tree-nav-example></tree-nav-example>
    </div>

    <div class="example-tree-container">
      <h2>Rtl Nav Mode</h2>
      <tree-nav-rtl-example></tree-nav-rtl-example>
    </div>
  </div>

  <div class="example-configurable-tree-container">
    <h2>Configurable</h2>
    <tree-configurable-example></tree-configurable-example>
  </div>
</div>