UI kit reference

code/editor/FileTabPill

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/FileTabPill.tsx

Components#

Open-file tab: the panel strip's pill with the file's glyph; a dot while unsaved.

TypeScript

function FileTabPill(props: FileTabPillProps): Element

Parameters
Name	Type	Description
props	`FileTabPillProps`	The tab's file, state and handlers; `onMove` turns on the keyboard reorder.

Element

FileTabPill props
Name	Type	Description
active	`boolean`	The tab shown in the column; it keeps its close button.
className?	`string`	Extra classes on the root element.
dirty?	`boolean`	Unsaved edits: a dot replaces the close glyph until hover.
glyph?	`ReactNode`	Drawn before the name. Default: the file tree's icon for `path`.
label?	`string`	Shown in place of the file's name (a tab that is not a file).
lifted?	`boolean`	Held by a drag (`ReorderTabs`).
onClose	`() => void`	The close button or a middle-click.
onContextMenu?	`(at: { x: number; y: number }) => void`	Right-click, with the pointer's viewport coordinates; the browser menu is suppressed only when set.
onMove?	`(delta: number) => void`	Alt+Shift+←/→ moves the tab one slot (-1 / +1).
onPick	`() => void`	The tab was selected (click or keyboard).
path	`string`	The open file (or view id); its last segment is the tab's name.
readOnly?	`boolean`	Shown read-only (a type definition): said in the title.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`string`	The tooltip. Default: the path, or what unsaved or read-only says.

TypeScript

interface FileTabPillProps

FileTabPillProps properties
Name	Type	Description
active	`boolean`	The tab shown in the column; it keeps its close button.
className?	`string`	Extra classes on the root element.
dirty?	`boolean`	Unsaved edits: a dot replaces the close glyph until hover.
glyph?	`ReactNode`	Drawn before the name. Default: the file tree's icon for `path`.
label?	`string`	Shown in place of the file's name (a tab that is not a file).
lifted?	`boolean`	Held by a drag (`ReorderTabs`).
onClose	`() => void`	The close button or a middle-click.
onContextMenu?	`(at: { x: number; y: number }) => void`	Right-click, with the pointer's viewport coordinates; the browser menu is suppressed only when set.
onMove?	`(delta: number) => void`	Alt+Shift+←/→ moves the tab one slot (-1 / +1).
onPick	`() => void`	The tab was selected (click or keyboard).
path	`string`	The open file (or view id); its last segment is the tab's name.
readOnly?	`boolean`	Shown read-only (a type definition): said in the title.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`string`	The tooltip. Default: the path, or what unsaved or read-only says.