CardWindowHeader
A retro operating system window title bar featuring tri-color status lamps on the left, a centered monospace uppercase title, and ASCII-style window controls on the right. Supports a multi-mode adaptive architecture: serves as a purely decorative layer in presentation cards, or as full interactive control buttons with keyboard focus and accessibility semantics.
Preview
交互控制模式（工控实体按钮）
> LAST_EVENT: 等待操作...
> 点击右侧 [ _ ] [ □ ] [ X ] 或左侧红黄绿指示灯可直接触发动作并支持 Tab 聚焦。
默认静态装饰模式
> CPU ██████████░░░░ 68%
> MEM ███████░░░░░░░ 47%
> STATUS: ALL SYSTEMS NOMINAL (静态展示，无 a11y 负担)
隐藏控制符（纯标题栏）
自定义操作区插槽
Installation
pnpm dlx brutx-vue@latest add card-window-headerUsage
Basic Usage (Decorative)
<script setup>
import { CardWindowHeader } from 'brutx-ui-vue'
</script>
<template>
<div class="border-3 border-brutal shadow-brutal">
<CardWindowHeader title="System Monitor v2.0" />
<div class="p-4">Window body…</div>
</div>
</template>Interactive Control Mode
Enable window control actions with closable, minimizable, or maximizable. Supports Tab keyboard navigation, Enter / Space activation, and @close / @minimize / @maximize event handling.
<script setup>
import { ref } from 'vue'
import { CardWindowHeader } from 'brutx-ui-vue'
const isCollapsed = ref(false)
function onClose() {
console.log('Window closed')
}
function onMinimize() {
isCollapsed.value = !isCollapsed.value
}
</script>
<template>
<div class="border-3 border-brutal shadow-brutal">
<CardWindowHeader
title="Terminal_Shell"
closable
minimizable
maximizable
interactive-lamps
@close="onClose"
@minimize="onMinimize"
/>
<div v-show="!isCollapsed" class="p-4">Collapsible console content…</div>
</div>
</template>Custom Actions Area Slot
The actions slot has highest priority and replaces the default control buttons with arbitrary action components.
<template>
<CardWindowHeader title="Config Editor">
<template #actions>
<Button size="sm" variant="accent">SAVE</Button>
</template>
</CardWindowHeader>
</template>API Reference
| Name | Type | Default | Description |
|---|---|---|---|
titleRequired | string | — | The centered window title, styled in uppercase monospace text and truncated when too long. |
DetailsDeclared typestring Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
showControls | boolean | undefined | true | Shows static ASCII controls on the right when there is no actions slot and none of the three interactive controls are enabled. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
closable | boolean | undefined | false | Enables the close button on the right; an actions slot replaces this button. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
minimizable | boolean | undefined | false | Enables the minimize button on the right; an actions slot replaces this button. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
maximizable | boolean | undefined | false | Enables the maximize button on the right; an actions slot replaces this button. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
interactiveLamps | boolean | undefined | false | Makes the left lamps trigger their corresponding actions: red closes, yellow minimizes, and green maximizes.
|
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
closeAriaLabel | string | undefined | undefinedRuntime fallback: | The accessible name of the close button on the right. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
minimizeAriaLabel | string | undefined | undefinedRuntime fallback: | The accessible name of the minimize button on the right. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
maximizeAriaLabel | string | undefined | undefinedRuntime fallback: | The accessible name of the maximize button on the right. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
class | string | undefined | undefined | Custom CSS classes merged onto the window header root container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
| Name | Signature or type | Description |
|---|---|---|
@close | [event: MouseEvent | KeyboardEvent] | Emitted when the close button or interactive red lamp is activated. The consumer performs the actual close action. |
DetailsDeclared type[event: MouseEvent | KeyboardEvent] Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
@minimize | [event: MouseEvent | KeyboardEvent] | Emitted when the minimize button or interactive yellow lamp is activated. The consumer performs the actual collapse or minimize action. |
DetailsDeclared type[event: MouseEvent | KeyboardEvent] Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
@maximize | [event: MouseEvent | KeyboardEvent] | Emitted when the maximize button or interactive green lamp is activated. The consumer performs the actual expand or maximize action. |
DetailsDeclared type[event: MouseEvent | KeyboardEvent] Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
| Name | Signature or type | Description |
|---|---|---|
#actions | {} | Replaces the entire right actions area, taking precedence over built-in interactive buttons and static ASCII controls. |
DetailsDeclared type{}Sourcepackages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
Accessibility
- Adaptive semantics: When no interactive props are set, controls and status lamps carry
aria-hidden="true", producing zero screen reader clutter. When interactive props are provided, elements upgrade to semantic<button>tags with accuratearia-labels. - Keyboard navigation: Buttons feature
FOCUS_RING_CLASSEShigh-contrast brutalist focus rings, supporting Tab key focus and Enter / Space activation.