Doggo Storybook 0.10.4-58-gbc96e61

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.

 Read more Read less
[]

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.

 Read more Read less

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.

 Read more Read less

Example:

<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.