TitleBar

A custom, draggable title bar with native minimize, maximize and close controls.

TitleBarProps packages/core/src/components/titlebar.ts:37 ↗

Import

import { TitleBar } from "@tarve/core";

Usage

TitleBar.tsx

import { Badge, Column, Row, Text, TitleBar, Window } from "@tarve/core";

<Window title="Editor" width={960} height={640}>
  <TitleBar height={40} showMaximize={false}>
    <Row gap={8} align="center" padding={12}>
      <Text weight={600}>Editor</Text>
      <Badge variant="secondary">main.ts</Badge>
    </Row>
  </TitleBar>
  <Column flex={1} padding={24}>
    <Text>Window content</Text>
  </Column>
</Window>

Props

Prop	Type	Default
`height`	`number`	`40`
`showClose`	`boolean`	`true`
`showMaximize`	`boolean`	`true`
`showMinimize`	`boolean`	`true`
`title`	`string`	—

Inherited from ViewProps 11 props

Prop	Type	Default
`align`	`Style["align"]`	—
`dismissOnOutside`	`boolean`	—
`dragRegion`	`boolean`	—
`flex`	`number`	—
`focusable`	`boolean`	—
`gap`	`number`	—
`justify`	`Style["justify"]`	—
`onOutsideClick`	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "close"`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle