46 lines
2.1 KiB
Vue
46 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
title: string
|
|
breadcrumb?: string
|
|
description?: string
|
|
status?: string
|
|
dirty?: boolean
|
|
}>(), { breadcrumb:'', description:'', status:'', dirty:false })
|
|
</script>
|
|
|
|
<template>
|
|
<header class="kbx-page-header">
|
|
<div class="kbx-page-header__identity">
|
|
<div v-if="breadcrumb" class="kbx-page-header__breadcrumb">{{ breadcrumb }}</div>
|
|
<div class="kbx-page-header__title-row">
|
|
<h1>{{ title }}</h1>
|
|
<span v-if="status" class="kbx-page-header__status">{{ status }}</span>
|
|
<span v-if="dirty" class="kbx-page-header__dirty">변경됨</span>
|
|
</div>
|
|
<p v-if="description">{{ description }}</p>
|
|
</div>
|
|
<div class="kbx-page-header__utility"><slot name="utility" /></div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-page-header {
|
|
min-height:var(--kbx-page-header-height);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:var(--kbx-space-4);
|
|
padding:var(--kbx-space-1) var(--kbx-screen-inline-padding);
|
|
border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);
|
|
background:var(--kbx-color-surface);
|
|
}
|
|
.kbx-page-header__identity { min-width:0; }
|
|
.kbx-page-header__title-row { display:flex; align-items:center; gap:var(--kbx-space-2); min-width:0; }
|
|
h1 { font-size:var(--kbx-font-2xl); font-weight:600; margin:0; line-height:1.3; }
|
|
.kbx-page-header__breadcrumb, p { font-size:var(--kbx-font-xs); color:var(--kbx-color-text-muted); margin:0 0 var(--kbx-space-1); }
|
|
.kbx-page-header__status, .kbx-page-header__dirty { font-size:var(--kbx-font-xs); padding:var(--kbx-space-1) var(--kbx-space-2); border:var(--kbx-border-width) solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); white-space:nowrap; }
|
|
.kbx-page-header__status { background:var(--kbx-color-surface-muted); }
|
|
.kbx-page-header__dirty { color:var(--kbx-color-warning-text); border-color:var(--kbx-color-warning-border); background:var(--kbx-color-warning-surface); }
|
|
.kbx-page-header__utility { display:flex; align-items:center; gap:var(--kbx-space-1); flex-shrink:0; }
|
|
</style>
|