File Tabs
File Tabs provides a tabbed interface for managing multiple files or documents. Tabs can be reordered via drag-and-drop, closed individually, and display status indicators. Perfect for code editors and file managers.
Example
File1.tsx
File2.tsx
File3.tsx
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop selectedIndex | Type number | Default value 0 | Description Index of the currently selected/active tab |
Prop onSelect | Type (index: number) => void | Default value undefined | Description Callback function called when a tab is selected. Receives the tab index. |
Prop onClose | Type (index: number) => void | Default value undefined | Description Callback function called when a tab is closed. Receives the tab index. |
Prop onReorderTab | Type (sourcePosition: number, destinationPosition: number) => void | Default value undefined | Description Callback function called when a tab is reordered via drag-and-drop. Receives source and destination indices. |
Prop children | Type ReactElement<FileTabProps> | Array<ReactElement<FileTabProps>> | Default value undefined | Description FileTabs.Tab components to display as tabs |
FileTabs.Tab Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop text | Type string | Default value undefined | Description Text label displayed in the tab |
Prop index | Type number | Default value undefined | Description Unique index of this tab, used for selection and reordering. Required. |
Prop status | Type "default" | "success" | "neutral" | "danger" | "warning" | "info" | Default value "default" | Description Visual status indicator that determines the tab color |
Prop icon | Type IconName | ReactNode | Default value undefined | Description Icon name or React node to display in the tab |
Prop preview | Type boolean | Default value false | Description Whether the tab is in preview mode (typically shown with italic styling) |
Prop onClose | Type () => void | Default value undefined | Description Callback function called when the tab close button is clicked |
Quick Start
import { FileTabs } from '@clickhouse/click-ui'
import { useState } from 'react'
function MyFileTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
<FileTabs
selectedIndex={selectedIndex}
onSelect={setSelectedIndex}
onClose={(index) => {}}
onReorderTab={(source, dest) => {}}
>
<FileTabs.Tab index={0} text="File1.tsx" />
<FileTabs.Tab index={1} text="File2.tsx" />
</FileTabs>
)
}Related Components
- Tabs: For general tabbed interfaces without drag-and-drop.
- Container: For organizing file tabs within layouts.
Common Use Cases
Editor Tabs
Component.tsx
Styles.css
README.md
import { FileTabs } from '@clickhouse/click-ui'
import { useState } from 'react'
function EditorTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
<FileTabs
selectedIndex={selectedIndex}
onSelect={setSelectedIndex}
onClose={() => {}}
onReorderTab={() => {}}
>
<FileTabs.Tab index={0} text='Component.tsx' icon='code-in-square' />
<FileTabs.Tab index={1} text='Styles.css' icon='code-in-square' />
</FileTabs>
)
}With Status Indicators
File1.tsx
File2.tsx
File3.tsx
File4.tsx
import { FileTabs } from '@clickhouse/click-ui'
import { useState } from 'react'
function StatusTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
<FileTabs
selectedIndex={selectedIndex}
onSelect={setSelectedIndex}
onClose={() => {}}
onReorderTab={() => {}}
>
<FileTabs.Tab index={0} text='File1.tsx' status='default' />
<FileTabs.Tab index={1} text='File2.tsx' status='success' />
</FileTabs>
)
}Preview Mode
File1.tsx
File2.tsx