Skip to content
+

File Customization

Learn how to customize the Tree Item component.

Basics

Change nested item's indentation

Use the itemChildrenIndentation prop to change the indentation of the nested items. By default, a nested item is indented by 12px from its parent item.

  • Documents

    • Personal

    • Group photo

  • History

Press Enter to start editing

Apply the nested item's indentation at the item level

By default, the indentation of nested items is applied by the groupTransition slot of its parent (i.e.: the DOM element that wraps all the children of a given item). This approach is not compatible with upcoming features like the reordering of items using drag & drop.

To apply the indentation at the item level (i.e.: have each item responsible for setting its own indentation using the padding-left CSS property on its content slot), you can use the indentationAtItemLevel experimental feature. It will become the default behavior in the next major version of the File Explorer component.

  • Documents

    • Personal

    • Group photo

  • History

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.