分栏面板 Splitter

#基础用法

Draft

Notes

splitter/basic.vue

<script setup lang="ts">
import { Splitter } from "@bysages/vue";
</script>

<template>
  <Splitter.Root :panels="[{ id: 'draft' }, { id: 'notes' }]" :default-size="[40, 60]" class="h-40">
    <Splitter.Panel id="draft">Draft</Splitter.Panel>
    <Splitter.ResizeTrigger id="draft:notes" aria-label="Resize panels">
      <Splitter.ResizeTriggerIndicator />
    </Splitter.ResizeTrigger>
    <Splitter.Panel id="notes">Notes</Splitter.Panel>
  </Splitter.Root>
</template>

#属性

#Panel

属性	类型	默认值	描述
`id`	`PanelId`		—

#ResizeTriggerIndicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ResizeTrigger

属性	类型	默认值	描述
`disabled`	`boolean \| undefined`		—
`id`	`ResizeTriggerId`		—

#Root

属性	类型	默认值	描述
`defaultSize`	`number[]`		面板渲染时的初始尺寸；不需要控制面板尺寸时使用
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; resizeTrigger(id: string): string; label(id: string): string; panel(id: string \| number): string; }>`		splitter 各元素的 id，适合组合使用
`keyboardResizeBy`	`number`		使用键盘调整面板大小时每次改变的像素数
`nonce`	`string`		注入 splitter 光标样式表使用的 nonce
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	分隔器的方向，可为 `horizontal` 或 `vertical`
`panels`	`splitter.PanelData[]`		各面板的尺寸约束
`registry`	`splitter.SplitterRegistry`		支持多拖拽的 splitter 注册表
`size`	`number[]`		受控的面板尺寸数据