# 布局正文

## 使用方法

可滚动的主内容区域。

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

`LayoutContent` 拿走 `Layout` 里剩下的那块地：页眉、页脚和面板占完以后的空间归它；它自己带内边距，内容比这块地高的时候就在它里面滚动，页眉和页脚待在原地不动。

`isScrollable` 默认是开的。整个页面一起滚动、这块只需要跟着内容长高时，把它关掉。`padding` 会盖掉外层 `Layout` 传下来的内边距，写 `padding: 0` 就是通栏。`label` 和 `role` 给这块地一个地标角色，读屏软件的地标列表里就能直接跳过来。

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

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        订单
      </LayoutHeader>
    </template>
    <LayoutContent>
      选择一笔订单。
    </LayoutContent>
  </Layout>
</template>
```

## 示例

### 基础

固定在顶部的页眉下面是一块可滚动的正文区域。把 LayoutContent 放进 Layout，主内容就自带内边距，内容溢出时也只在这一块里滚动。

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

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <Card variant="muted" />
      </LayoutHeader>
    </template>
    <LayoutContent>
      <VStack :gap="3">
        <Heading :level="5">
          Main Content
        </Heading>
        <Text type="body" color="secondary">
          LayoutContent fills the remaining space and scrolls when its content overflows, while the header stays fixed.
        </Text>
      </VStack>
    </LayoutContent>
  </Layout>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `isScrollable` | `boolean` | `true` | 内容比自己分到的空间高时，在这块里滚动。 |
| `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`：主内容。

## 模板引用

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

## 原生属性

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