Skip to content
本页目录

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右侧内容

预算单位软件产品开发部