Page Header 页头 ​

<template>
  <div aria-label="A complete example of page header">
    <u-page-header @back="onBack">
      <template #breadcrumb>
        <u-breadcrumb separator="/">
          <u-breadcrumb-item :to="{ path: './page-header.html' }">
            homepage
          </u-breadcrumb-item>
          <u-breadcrumb-item>
            <a href="./page-header.html">route 1</a>
          </u-breadcrumb-item>
          <u-breadcrumb-item>route 2</u-breadcrumb-item>
        </u-breadcrumb>
      </template>
      <template #content>
        <div class="flex items-center">
          <u-avatar
            class="mr-3"
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span class="text-large font-600 mr-3"> Title </span>
          <span class="text-sm mr-2" style="color: var(--u-text-color-regular)">
            Sub title
          </span>
          <u-tag>Default</u-tag>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <u-button>Print</u-button>
          <u-button type="primary" class="ml-2">Edit</u-button>
        </div>
      </template>

      <u-descriptions :column="3" size="small" class="mt-4">
        <u-descriptions-item label="Username">
          kooriookami
        </u-descriptions-item>
        <u-descriptions-item label="Telephone">
          18100000000
        </u-descriptions-item>
        <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
        <u-descriptions-item label="Remarks">
          <u-tag size="small">School</u-tag>
        </u-descriptions-item>
        <u-descriptions-item label="Address">
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
        </u-descriptions-item>
      </u-descriptions>
      <p class="mt-4 text-sm">
        Uniboot UI team uses <b>weekly</b> release strategy under normal
        circumstance, but critical bug fixes would require hotfix so the actual
        release number <b>could be</b> more than 1 per week.
      </p>
    </u-page-header>
  </div>
</template>

<script setup lang="ts">
import { UNotification as notify } from 'uniboot-ui'

const onBack = () => {
  notify('Back')
}
</script>

<template>
  <u-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> Title </span>
    </template>
  </u-page-header>
</template>

<script lang="ts" setup>
const goBack = () => {
  console.log('go back')
}
</script>

<template>
  <u-page-header :icon="ArrowLeft">
    <template #content>
      <span class="text-large font-600 mr-3"> Title </span>
    </template>
  </u-page-header>
</template>

<script lang="ts" setup>
import { ArrowLeft } from '@uniboot/icons-vue'
</script>

<template>
  <u-page-header icon="">
    <template #content>
      <span class="text-large font-600 mr-3"> Title </span>
    </template>
  </u-page-header>
</template>

<template>
  <u-page-header>
    <template #breadcrumb>
      <u-breadcrumb separator="/">
        <u-breadcrumb-item :to="{ path: './page-header.html' }">
          homepage
        </u-breadcrumb-item>
        <u-breadcrumb-item
          ><a href="./page-header.html">route 1</a></u-breadcrumb-item
        >
        <u-breadcrumb-item>route 2</u-breadcrumb-item>
      </u-breadcrumb>
    </template>
    <template #content>
      <span class="text-large font-600 mr-3"> Title </span>
    </template>
  </u-page-header>
</template>

<template>
  <u-page-header icon="">
    <template #content>
      <div class="flex items-center">
        <u-avatar
          :size="32"
          class="mr-3"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3"> Title </span>
        <span class="text-sm mr-2" style="color: var(--u-text-color-regular)">
          Sub title
        </span>
        <u-tag>Default</u-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <u-button>Print</u-button>
        <u-button type="primary" class="ml-2">Edit</u-button>
      </div>
    </template>
  </u-page-header>
</template>

<template>
  <u-page-header>
    <template #content>
      <span class="text-large font-600 mr-3"> Title </span>
    </template>
    <div class="mt-4 text-sm font-bold">
      Your additional content can be added with default slot, You may put as
      many content as you want here.
    </div>
  </u-page-header>
</template>

<template>
  <u-page-header class="image-style-page-header">
    <template #header>
      <div class="image-style-page-header__inner">
        <div class="image-style-page-header__brand">
          <img
            src="https://masslink.klond.com.cn/_next/image?url=/images/logo/logo.png&w=384&q=75"
            alt="Masslink"
          />
        </div>
        <div class="image-style-page-header__actions">
          <u-icon><Search /></u-icon>
          <u-icon><Bell /></u-icon>
          <u-icon><QuestionFilled /></u-icon>
          <u-avatar :size="24">U</u-avatar>
          <span class="image-style-page-header__user">用户名</span>
        </div>
      </div>
    </template>
  </u-page-header>
</template>

<script setup lang="ts">
import { Bell, QuestionFilled, Search } from '@uniboot/icons-vue'
</script>

<style scoped>
.image-style-page-header {
  padding: 0;
}

.image-style-page-header__inner {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--u-border-color-lighter);
  border-radius: 4px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #f7f9fc 0%, #ffffff 100%);
}

.image-style-page-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--u-text-color-primary);
}

.image-style-page-header__brand img {
  height: 28px;
}

.image-style-page-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--u-text-color-secondary);
}

.image-style-page-header__user {
  color: var(--u-text-color-regular);
  font-size: 14px;
}
</style>