# 布局页眉

## 使用方法

页面标题、应用栏和工具栏待的那条顶栏。

```ts
import { LayoutHeader } from '@astryx-vue/core/Layout'
```

`LayoutHeader` 是 `Layout` 顶部那一块，高度固定。下面的 `LayoutContent` 自己滚，它不动，所以标题、面包屑或者一排操作按钮一直看得见。

`height` 写数字按像素，也可以写任意 CSS 长度。`padding` 设这一块的内边距；`paddingBlockEnd` 只改下边，标签下划线或者分隔线要贴住页眉边缘时用它。`hasDivider` 画底下那条线，不写就跟着外层 `Layout` 的 `defaultHasDividers` 走。

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Heading } from '@astryx-vue/core/Heading'
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <HStack :gap="2" h-align="between" align="center">
          <Heading :level="4">
            仪表盘
          </Heading>
          <Button label="新建" variant="primary" />
        </HStack>
      </LayoutHeader>
    </template>
    <LayoutContent>
      选择一份报表。
    </LayoutContent>
  </Layout>
</template>
```

## 示例

### 带操作

固定在顶部的页眉，左边是标题，右边放一个主操作，下面是可滚动的内容。把 LayoutHeader 放进 Layout，页面级页眉就固定不动。

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Card } from '@astryx-vue/core/Card'
import { Heading } from '@astryx-vue/core/Heading'
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <HStack :gap="2" h-align="between" align="center">
          <Heading :level="4">
            Dashboard
          </Heading>
          <Button label="New Item" variant="primary" />
        </HStack>
      </LayoutHeader>
    </template>
    <LayoutContent>
      <Card variant="muted" />
    </LayoutContent>
  </Layout>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `hasDivider` | `boolean` | — | 在底边画一条线。不写时看外层 `Layout` 的 `defaultHasDividers`，都没有就是 `false`。 |
| `height` | `number \| string` | — | 页眉高度。写数字按像素，写字符串原样使用。 |
| `label` | `string` | — | 这个地标的无障碍名称。 |
| `padding` | `SpacingStep` | — | 用间距刻度写内边距。写 `0` 就是让内容自己管边距。 |
| `paddingBlockEnd` | `SpacingStep` | — | 只改下边内边距，会盖掉这一条边上的 `padding`，方便标签下划线和分隔线贴住页眉边缘。 |
| `role` | `string` | — | ARIA 地标角色。 |

`SpacingStep` 可以取这些值：

```ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
```

## 插槽

- `default`：页眉内容。

## 模板引用

`LayoutHeader` 公开 `element`。
类型为 `HTMLDivElement | null`。

## 原生属性

根元素会接收 HTML 属性、`aria-*` 属性、`data-*` 属性、`class` 和 `style`。`class` 会和组件自己的类合并。