# 布局面板

## 使用方法

放导航、设置或者详情检视的侧栏。

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

`LayoutPanel` 是 `Layout` 侧边那一块，放在 `start` 或 `end` 插槽里。它自己占一块宽度，自己管滚动，跟 `LayoutContent` 互不影响，所以导航列表或者详情检视会一直待着，只有中间那块在动。

`width` 写数字按像素。宽度交给 `ResizeHandle` 拖的时候，改成把 `useResizable` 返回的 `props` 传给 `resizable`，面板宽度就跟着拖拽走。`hasDivider` 画画朝内容的那条边；同一条边上已经有拖拽分隔条在画线了，就别再开。`isScrollable` 默认是开的，这块只需要跟着内容长高时就关掉。

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

<template>
  <Layout>
    <template #start>
      <LayoutPanel :width="200" role="navigation" label="分区">
        <List>
          <ListItem is-selected label="概览" />
          <ListItem label="分析" />
          <ListItem label="设置" />
        </List>
      </LayoutPanel>
    </template>
    <LayoutContent>
      这里放正文。
    </LayoutContent>
  </Layout>
</template>
```

## 示例

### 导航

固定宽度的侧栏放导航列表，右边是主内容。侧栏用 Layout 的 start 或 end 插槽，交给 LayoutPanel。

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

<template>
  <Layout>
    <template #start>
      <LayoutPanel :width="140" role="navigation" label="Sections">
        <List>
          <ListItem is-selected label="Overview" />
          <ListItem label="Analytics" />
          <ListItem label="Settings" />
        </List>
      </LayoutPanel>
    </template>
    <LayoutContent>
      <Card variant="muted" />
    </LayoutContent>
  </Layout>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `hasDivider` | `boolean` | `false` | 在朝内容的那条边上画一条线。紧挨着的 `ResizeHandle` 已经在同一条边画线时，这里就不要开。 |
| `isScrollable` | `boolean` | `true` | 内容比面板高的时候，在面板里滚动。 |
| `label` | `string` | — | 这个地标的无障碍名称。 |
| `padding` | `SpacingStep` | — | 用间距刻度写内边距，会盖掉外层布局传下来的值。写 `0` 就是通栏。 |
| `resizable` | `LayoutResizable` | — | `useResizable` 返回的 `props`。传了它宽度就由那个 hook 说了算，`width` 不再生效。旁边要放一个 `ResizeHandle`，并把同一个对象交给它。对象里带着这块区域的轴 `_direction`（`'horizontal' \| 'vertical'`），要和把手的 `direction` 一致。只有 `_size` 是必填的，手写 `{ _size: 250 }` 依然可用。 |
| `role` | `string` | — | ARIA 地标角色，例如 `navigation`。 |
| `width` | `number \| string` | — | 面板宽度。写数字按像素，写字符串原样使用。传了 `resizable` 就不起作用。 |

`SpacingStep` 可以取这些值：

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

## 插槽

- `default`：面板内容。

## 模板引用

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

## 原生属性

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