cloud-ui.vusion
Version:
Vusion Cloud UI
488 lines (487 loc) • 15.4 kB
YAML
- name: u-multi-layout
title: 分栏布局
description: 一定的规则布局
icon: multi-layout
labels:
- Layout
attrs:
- name: direction
title: 主轴方向
type: string
display: capsules
bindHide: true
options:
- value: horizontal
title: 横向排列
icon: flex-horizontal
tooltip: 横向
- value: vertical
title: 纵向排列
icon: flex-vertical
tooltip: 纵向
default: horizontal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 横向:内部子元素进行横向排布。纵向:内部子元素进行纵向排布。
tooltipLink: ""
- name: justify
title: 横轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 左对齐
icon: horizontal-justify-start
tooltip: 左对齐
- value: center
title: 居中对齐
icon: horizontal-justify-center
tooltip: 居中对齐
- value: end
title: 右对齐
icon: horizontal-justify-end
tooltip: 右对齐
- value: space-between
title: 平均分布(两端不留空)
icon: horizontal-justify-space-between
tooltip: 平均分布(两端不留空)
- value: space-around
title: 平均分布
icon: horizontal-justify-space-around
tooltip: 平均分布
default: start
dependency:
- direction: horizontal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 支持左对齐、居中对齐、右对齐、占满容器宽度。
tooltipLink: ""
- name: alignment
title: 纵轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 顶对齐
icon: horizontal-alignment-start
tooltip: 顶对齐
- value: center
title: 垂直居中
icon: horizontal-alignment-center
tooltip: 垂直居中
- value: end
title: 底对齐
icon: horizontal-alignment-end
tooltip: 底对齐
- value: baseline
title: 行内文字基线对齐
icon: horizontal-alignment-baseline
tooltip: 行内文字基线对齐
- value: stretch
title: 占满容器高度
icon: horizontal-alignment-stretch
tooltip: 占满容器高度
default: stretch
dependency:
- direction: horizontal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 支持顶对齐、垂直居中、底对齐、平均分布(两端不留空)、平均分布。
tooltipLink: ""
- name: alignment
title: 纵轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 左对齐
icon: vertical-alignment-start
tooltip: 左对齐
- value: center
title: 居中对齐
icon: vertical-alignment-center
tooltip: 居中对齐
- value: end
title: 右对齐
icon: vertical-alignment-end
tooltip: 右对齐
- value: stretch
title: 拉伸子元素充满整个父元素空间
icon: vertical-alignment-stretch
tooltip: 占满容器宽度
default: stretch
dependency:
- direction: vertical
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 支持顶对齐、垂直居中、底对齐、平均分布(两端不留空)、平均分布。
tooltipLink: ""
- name: justify
title: 横轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 顶对齐
icon: vertical-justify-start
tooltip: 顶对齐
- value: center
title: 垂直居中
icon: vertical-justify-center
tooltip: 垂直居中
- value: end
title: 底对齐
icon: vertical-justify-end
tooltip: 底对齐
- value: space-between
title: 平均分布(两端不留空)
icon: vertical-justify-space-between
tooltip: 平均分布(两端不留空)
- value: space-around
title: 平均分布
icon: vertical-justify-space-around
tooltip: 平均分布
default: start
dependency:
- direction: vertical
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 支持左对齐、居中对齐、右对齐、占满容器宽度。
tooltipLink: ""
- name: gap
title: 内容间隙
type: string
options:
- value: shrink
title: 收缩
- value: none
title: 无
- value: small
title: 小
- value: normal
title: 正常
- value: large
title: 大
default: none
description: 布局中各分栏间的空隙大小
group: 样式属性
brifeDoc: ""
docDescription: 分栏布局中各分栏间的空隙大小,缺省为无,支持收缩、无、小、正常、大共5个级别。
tooltipLink: ""
slots:
- concept: Slot
name: default
description: 插入`<u-multi-layout-item>`子组件。
support:
- name: u-multi-layout-item
title: 布局栏
snippet: <u-multi-layout-item></u-multi-layout-item>
events:
- name: scroll
title: 滚动时
description: 滚动时触发
params:
- name: $event
type: object
description: 滚动事件对象
schema:
$ref: "#/systemTypes/ScrollEvent"
- name: $event.scrollHeight
type: any
description: 滚动内容高度
- name: $event.scrollWidth
type: any
description: 滚动内容宽度
- name: $event.scrollTop
type: any
description: 滚动内容距离顶部高度
- name: $event.scrollLeft
type: any
description: 滚动内容距离左侧宽度
- name: $event.clientHeight
type: any
description: 可视区域高度
- name: $event.clientWidth
type: any
description: 可视区域宽度
- name: $listeners
kind: trigger
description: 监听所有事件。
params: []
- name: u-multi-layout-item
title: 布局栏
description: 一定的规则布局
icon: multi-layout-item
labels:
- Layout
attrs:
- name: fixed
title: 固定展示
type: boolean
default: false
advanced: true
description: 开启后滚动时该项固定显示
- name: fixdirec
title: 固定位置
type: string
advanced: true
options:
- value: left
title: 左
- value: right
title: 右
default: left
description: 固定在左侧还是右侧
- name: display
title: 展示方式
type: string
options:
- value: block
title: 块级
- value: inline
title: 行内
default: block
description: 行内展示,或块级换行展示
advanced: true
- name: mode
title: 布局模式
type: string
display: capsules
bindHide: true
description: ""
tooltipLink: http://help.lcap.163yun.com/1.%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8/2.%E9%A1%B5%E9%9D%A2/05.PC%E9%A1%B5%E9%9D%A2%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/01.%E5%B8%83%E5%B1%80/040.%E5%88%86%E6%A0%8F%E5%B8%83%E5%B1%80.html
options:
- value: inline
title: 块级
icon: layout-inline-block
tooltip: 内联布局
- value: flex
title: 弹性
icon: layout-flex
tooltip: 弹性布局
default: inline
toggleclear:
- justify
- alignment
- wrap
group: 主要属性
brifeDoc: ""
docDescription: 内联布局:将当前元素修改为内联布局模式,各个内联布局模式的元素将默认排布在同一行中,若空间不足以排布下一个内联布局元素,则该元素将会换行。- 弹性布局:在弹性布局模式中,子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免溢出父元素。
- name: direction
title: 主轴方向
type: string
display: capsules
bindHide: true
options:
- value: horizontal
title: 横向排列
icon: flex-horizontal
tooltip: 横向
- value: vertical
title: 纵向排列
icon: flex-vertical
tooltip: 纵向
default: horizontal
description: 可更改布局的排列方向
toggleclear:
- justify
- alignment
dependency:
- mode: flex
group: 主要属性
brifeDoc: ""
docDescription: 横向:内部子元素进行横向排布,建议内部子元素使用行内布局。 纵向:内部子元素进行纵向排布,建议内部子元素使用块级布局。
tooltipLink: ""
- name: justify
title: 横轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 左对齐
icon: horizontal-justify-start
tooltip: 左对齐
- value: center
title: 居中对齐
icon: horizontal-justify-center
tooltip: 居中对齐
- value: end
title: 右对齐
icon: horizontal-justify-end
tooltip: 右对齐
- value: space-between
title: 平均分布(两端不留空)
icon: horizontal-justify-space-between
tooltip: 平均分布(两端不留空)
- value: space-around
title: 平均分布
icon: horizontal-justify-space-around
tooltip: 平均分布
default: start
dependency:
- mode: flex
direction: horizontal
toggleupdate:
- value: space-between
updateData:
gap: normal
- value: space-around
updateData:
gap: normal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 主轴方向为横向时:支持左对齐、居中对齐、右对齐、平均分布(两端不留空)、平均分布。主轴方向为纵向时:支持左对齐、居中对齐、右对齐、占满容器宽度。
tooltipLink: ""
- name: alignment
title: 纵轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 顶对齐
icon: horizontal-alignment-start
tooltip: 顶对齐
- value: center
title: 垂直居中
icon: horizontal-alignment-center
tooltip: 垂直居中
- value: end
title: 底对齐
icon: horizontal-alignment-end
tooltip: 底对齐
- value: baseline
title: 行内文字基线对齐
icon: horizontal-alignment-baseline
tooltip: 行内文字基线对齐
- value: stretch
title: 占满容器高度
icon: horizontal-alignment-stretch
tooltip: 占满容器高度
default: stretch
dependency:
- mode: flex
direction: horizontal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 主轴方向为横向时:支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。 主轴方向为纵向时:支持顶对齐、垂直居中、底对齐、平均分布(两端不留空)、平均分布。
tooltipLink: ""
- name: alignment
title: 纵轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 左对齐
icon: vertical-alignment-start
tooltip: 左对齐
- value: center
title: 居中对齐
icon: vertical-alignment-center
tooltip: 居中对齐
- value: end
title: 右对齐
icon: vertical-alignment-end
tooltip: 右对齐
- value: stretch
title: 拉伸子元素充满整个父元素空间
icon: vertical-alignment-stretch
tooltip: 占满容器宽度
default: stretch
dependency:
- mode: flex
direction: vertical
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 主轴方向为横向时:支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。主轴方向为纵向时:支持顶对齐、垂直居中、底对齐、平均分布(两端不留空)、平均分布。
tooltipLink: ""
- name: justify
title: 横轴对齐
type: string
display: capsules
bindHide: true
options:
- value: start
title: 顶对齐
icon: vertical-justify-start
tooltip: 顶对齐
- value: center
title: 垂直居中
icon: vertical-justify-center
tooltip: 垂直居中
- value: end
title: 底对齐
icon: vertical-justify-end
tooltip: 底对齐
- value: space-between
title: 平均分布(两端不留空)
icon: vertical-justify-space-between
tooltip: 平均分布(两端不留空)
- value: space-around
title: 平均分布
icon: vertical-justify-space-around
tooltip: 平均分布
default: start
dependency:
- mode: flex
direction: vertical
toggleupdate:
- value: space-between
updateData:
gap: normal
- value: space-around
updateData:
gap: normal
group: 主要属性
description: ""
brifeDoc: ""
docDescription: 主轴方向为横向时:支持左对齐、居中对齐、右对齐、平均分布(两端不留空)、平均分布。主轴方向为纵向时:支持左对齐、居中对齐、右对齐、占满容器宽度。
tooltipLink: ""
- name: gap
title: 内容间隙
type: string
options:
- value: shrink
title: 收缩
- value: none
title: 无
- value: small
title: 小
- value: normal
title: 正常
- value: large
title: 大
default: none
description: 内容块间隙大小
dependency:
- mode: flex
"!justify":
- space-between
- space-around
group: 样式属性
brifeDoc: ""
docDescription: 布局内各个组件之间的间隔,通常有收缩、无、小、正常、大,默认为无。
tooltipLink: ""
slots:
- concept: Slot
name: default
description: 内容
events:
- name: $listeners
kind: trigger
description: 监听所有事件。
params: []