File Tree

Display a list of files and folders in a hierarchical tree structure.

Basic

All folders and files are sorted automatically.

Imperative

Use props value to show more complex file tree.

Extra Message

Use props value to show more complex file tree.

Event

Path will be reported when file is clicked.

APIs

Tree.Props

AttributeDescriptionTypeAccepted valuesDefault
valuevalue of filesArray<FileTreeValue>--
initialExpandexpand by defaultboolean-false
onClickclick file event(path: string) => void--
...native propsHTMLAttributes'id', 'title', 'className', ...-

Tree.File.Props

AttributeDescriptionTypeAccepted valuesDefault
name(required)file namestring--
extraextra messagestring--
...native propsHTMLAttributes'id', 'title', 'className', ...-

Tree.Folder.Props

AttributeDescriptionTypeAccepted valuesDefault
name(required)folder namestring--
extraextra messagestring--
...native propsHTMLAttributes'id', 'title', 'className', ...-

type FileTreeValue

type FileTreeValue = {
  type: 'directory' || 'file'
  name: string
  extra?: string
  files?: Array<FileTreeValue>
}