Doggo Storybook 0.9.0

Tree

Renders a hierarchical list as a tree.

Read more Read less

A good use case for this component is a folder structure. For navigation and other menus, a regular nested list should be preferred.

Usage

<.tree label="Dogs">
  <tree_item>
    Breeds
    <:items>
      <.tree_item>Golden Retriever</.tree_item>
      <.tree_item>Labrador Retriever</.tree_item>
    </:items>
  </.tree_item>
  <.tree_item>
    Characteristics
    <:items>
      <.tree_item>Playful</.tree_item>
      <.tree_item>Loyal</.tree_item>
    </:items>
  </.tree_item>
</.tree>

CSS

You can target the wrapper with an attribute selector for the role:

[role="tree"] {}
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
label :string A accessibility label for the tree. Set as `aria-label` attribute. You should ensure that either the `label` or the `labelledby` attribute is set. Do not repeat the word `tree` in the label, since it is already announced by screen readers.
labelledby :string The DOM ID of an element that labels this tree. Example: ```html <h3 id="dog-tree-label">Dogs</h3> <.tree labelledby="dog-tree-label"></.tree> ``` You should ensure that either the `label` or the `labelledby` attribute is set.
rest :global Any additional HTML attributes.
Required inner_block * :slot Slot for the root nodes of the tree. Use the `tree_item/1` component as direct children.