File Explorer Basic - Customization
Learn how to customize the File Explorer Basic component.
Basics
Custom icons
Use the collapseIcon
slot, the expandIcon
slot and the defaultEndIcon
prop to customize the File Explorer icons.
The demo below shows how to add icons using both an existing icon library, such as Material Icons, and creating an icon from scratch using Material UI's SVG Icon component.
- doc.pdf
- notes.txt
- Images
- Movies
- Data
Custom toggle animations
Use the groupTransition
slot on the FileElement
to pass a component that handles your animation.
The demo below is animated using Material UI's Collapse component together with the react-spring library.
- doc.pdf
- notes.txt
- Images
- Movies
- Data
Custom styling
Use fileElementClasses
to target internal elements of the Tree Item component and change their styles.
- Notes
- Images
- Movies
- Data
Custom label
Use the label
slot to customize the Tree Item label or to replace it with a custom component.
The slotProps
prop allows you to pass props to the label component.
The demo below shows how to pass an id
attribute to the Tree Item label:
The slots
prop allows you to replace the default label with your own component:
The demo below shows how to add a tooltip on the Tree Item label:
Headless API
Use the useFile
hook to create your own component.
The demo below shows how to add an avatar and custom typography elements.
- A
- B
Common examples
Connection border
Target the fileElementClasses.groupTransition
class to add connection borders between the File Explorer items.
- Main
Gmail clone
Google's Gmail side nav is potentially one of the web's most famous file explorer components. The demo below shows how to replicate it.
The Gmail sidebar is one of the most well known examples of a tree view. The demo below shows how to recreate it with the File Explorer component: