GicSplitPage
左右布局组件,内容可通过插槽自行填充,左侧内容宽度可拖拽调整
基本用法

示例
vue
<template>
<div style="height: 500px">
<splitPage>
<template #leftContent>左侧树</template>
<template #rightContent>右侧内容</template>
</splitPage>
</div>
</template>
<script setup lang="ts">
import { GicSplitPage } from 'ctj-ui-next'
</script>
<style lang="less" scoped></style><template>
<div style="height: 500px">
<splitPage>
<template #leftContent>左侧树</template>
<template #rightContent>右侧内容</template>
</splitPage>
</div>
</template>
<script setup lang="ts">
import { GicSplitPage } from 'ctj-ui-next'
</script>
<style lang="less" scoped></style>属性 Props
| 参数 | 说明 | 类型 | 是否必传 | 默认值 |
|---|---|---|---|---|
| minWidth | 左侧内容最小宽度 | string | 否 | '280px' |
| maxWidth | 左侧内容最大宽度 | string | 否 | '400px' |
| defaultWidth | 可收起区域的默认宽度 | string | 否 | '280px' |
| direction | 可收起内容的配置 | string, 'left'/'right' | 否 | 'left' |
插槽 Slots
| 插槽名称 | 说明 | 参数 |
|---|---|---|
| leftContent | 左侧内容 | |
| rightContent | 右侧内容 |