# 布局页脚

## 使用方法

放操作按钮、页码和状态信息的底栏。

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

`LayoutFooter` 是 `Layout` 底部那一块，位置固定。上面的内容自己滚，它不动，所以一排按钮、页码或者一行状态信息一直留在原处。

`height` 写数字按像素，也可以写任意 CSS 长度。`padding` 设这一块的内边距。`hasDivider` 画顶上那条线，不写就跟着外层 `Layout` 的 `defaultHasDividers` 走。

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

<template>
  <Layout>
    <LayoutContent>
      订单详情。
    </LayoutContent>
    <template #footer>
      <LayoutFooter has-divider>
        <HStack :gap="2" h-align="end">
          <Button label="取消" variant="secondary" />
          <Button label="保存" variant="primary" />
        </HStack>
      </LayoutFooter>
    </template>
  </Layout>
</template>
```

## 示例

### 操作栏

固定在底部的页脚，按钮靠右排，上面是可滚动的内容。把 LayoutFooter 放进 Layout，保存、取消这类操作就一直在。

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

<template>
  <Layout>
    <LayoutContent>
      <Card variant="muted" />
    </LayoutContent>
    <template #footer>
      <LayoutFooter has-divider>
        <HStack :gap="2" h-align="end">
          <Button label="Cancel" variant="secondary" />
          <Button label="Save" variant="primary" />
        </HStack>
      </LayoutFooter>
    </template>
  </Layout>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `hasDivider` | `boolean` | — | 在顶边画一条线。不写时看外层 `Layout` 的 `defaultHasDividers`，都没有就是 `false`。 |
| `height` | `number \| string` | — | 页脚高度。写数字按像素，写字符串原样使用。 |
| `label` | `string` | — | 这个地标的无障碍名称。 |
| `padding` | `SpacingStep` | — | 用间距刻度写内边距。写 `0` 就是让内容自己管边距。 |
| `role` | `string` | — | ARIA 地标角色。 |

`SpacingStep` 可以取这些值：

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

## 插槽

- `default`：页脚内容。

## 模板引用

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

## 原生属性

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