Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

Vista de arbol

Un widget de vista de árbol presenta una lista jerárquica.

Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Vista básica de árbol

Selección múltiple

Tree views also support multi selection.

Vista de árbol controlada

The tree view also offers a controlled API.

Rich object

While the TreeView/TreeItem component API maximizes flexibility, an extra step is needed to handle a rich object.

Let's consider a data variable with the following shape, recursion can be used to handle it.

const data = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    // …
  ],
};
  • Parent
    • Child - 1

Vista de árbol personalizada

Iconos personalizados, bordes y animación

  • Main
    • Hello
    • World
    • Something something

Clon de Gmail

  • All Mail

  • Trash

  • Categories

    • Social

      90
    • Updates

      2,294
    • Forums

      3,566
    • Promotions

      733
  • History

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)

El componente sigue las prácticas de creación de WAI-ARIA.