fes.js/packages/fes-doc/docs/ui/split.md

pageClass
comp-page-class

split 分割面板

概述

用于展示操作进度，告知用户当前状态

代码示例

1 2 3 1 2 3

用鼠标拖动俩面板之间的线，可以改变面板的大小

有两种方向：horizontal垂直，vertical水平

1 2

Split组件在拖拽时抛出on-move-start、on-moving、on-move-end三个事件

当SplitItem组件的宽度或者高度发生改变时，抛出on-change事件，参数为{width, height}

1 2 3

水平场景下，可以设置splitItem的初始宽度width, 最小宽度min，最大宽度max

垂直场景下，可以设置splitItem的初始高度height, 最小高度min，最大高度max

width/height/min/max如果值大于1表示绝对值px，如果小于1表示相对容器的高度或者宽度，例如0.1表示10%

API

Split props

属性	说明	类型	默认值
diretion	面板分割的方向： vertical垂直、horizontal水平	String	horizontal

Split event

事件名	说明	返回值
on-move-start	按下分割线触发	event
on-moving	按下分割线移动时触发	event
on-move-end	松开按下的分割线时触发	event

SplitItem props

属性	说明	类型	默认值
width	宽度，当面板是水平方向有效	String、Number
height	高度，当面板是垂直方向有效	String、Number
min	最小宽度/高度	String、Number
max	最大宽度/高度	String、Number

SplitItem event

事件名	说明	回调参数
on-change	当宽度或者高度改变时触发	{width, height}