138 lines
2.7 KiB
Plaintext
138 lines
2.7 KiB
Plaintext
---
|
|
title: Files
|
|
description: A component that allows you to display a list of files and folders.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="files-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="files" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<Files>
|
|
<Folder name="Folder 1">
|
|
<File name="file1.txt" />
|
|
<File name="file2.txt" />
|
|
</Folder>
|
|
<Folder name="Folder 2">
|
|
<File name="file3.txt" />
|
|
<File name="file4.txt" />
|
|
</Folder>
|
|
</Files>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Files Advanced
|
|
|
|
<ComponentPreview name="files-advanced-demo" />
|
|
|
|
## Props
|
|
|
|
### Files
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the component.',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The class name of the component.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
activeClassName: {
|
|
description: 'The class name of the highlight.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
defaultOpen: {
|
|
description: 'The child folders open by default.',
|
|
type: 'string[]',
|
|
required: false,
|
|
},
|
|
open: {
|
|
description: 'The child folders open.',
|
|
type: 'string[]',
|
|
required: false,
|
|
},
|
|
onOpenChange: {
|
|
description: 'The callback function when the child folders open change.',
|
|
type: 'function',
|
|
required: false,
|
|
},
|
|
sideComponent: {
|
|
description:
|
|
'The component to display on the right side of the component.',
|
|
type: 'React.ReactNode',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### Folder
|
|
|
|
<TypeTable
|
|
type={{
|
|
name: {
|
|
description: 'The name of the folder.',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
children: {
|
|
description: 'The children of the component.',
|
|
type: 'React.ReactNode',
|
|
required: false,
|
|
},
|
|
className: {
|
|
description: 'The class name of the component.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
defaultOpen: {
|
|
description: 'The child folders open by default.',
|
|
type: 'string[]',
|
|
required: false,
|
|
},
|
|
open: {
|
|
description: 'The child folders open.',
|
|
type: 'string[]',
|
|
required: false,
|
|
},
|
|
onOpenChange: {
|
|
description: 'The callback function when the child folders open change.',
|
|
type: 'function',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### File
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'The class name of the component.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
name: {
|
|
description: 'The name of the file.',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Fumadocs](https://fumadocs.vercel.app/docs/ui/components/files) for the inspiration
|