cloud-ui.vusion

- name: u-grid-layout icon: grid-layout title: 栅格布局 description: 内部元素按照一定的规则布局 labels: - Layout attrs: - name: gap title: 行间隔 type: string options: - value: compact title: 紧凑（-1） - value: none title: 无（0） - value: small title: 小（8） - value: normal title: 正常（16） - value: large title: 大（32） default: normal description: 栅格行之间的间隔 group: 样式属性 brifeDoc: "" docDescription: 支持修改栅格行之间的间隔，支持紧凑（-1）、无（0）、小（8）、正常（16）、大（32）共6种间隔模式。 tooltipLink: "" slots: - concept: Slot name: default description: 插入`<u-grid-layout-row>`或`<u-grid-layout-column>`子组件。 common-empty-background: true support: - name: u-grid-layout-row title: 插入一行 snippet: <u-grid-layout-row :repeat="24"><u-grid-layout-column :span="8"></u-grid-layout-column><u-grid-layout-column :span="8"></u-grid-layout-column><u-grid-layout-column :span="8"></u-grid-layout-column></u-grid-layout-row> 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: u-grid-layout-row title: 栅格行 description: 内部元素行布局 attrs: - 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 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 group: 主要属性 description: "" brifeDoc: "" docDescription: 支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。 tooltipLink: "" - name: repeat title: 栅格数 type: number display: number default: 12 description: 默认24，可设置栅格行大小 min: 1 max: 24 group: 主要属性 brifeDoc: "" docDescription: 支持设置栅格行大小，默认为24。 tooltipLink: "" - name: gap title: 列间隔 type: string options: - value: none title: 无（0） - value: mini title: 迷你（4） - value: small title: 小（8） - value: normal title: 正常（16） - value: large title: 大（24） - value: huge title: 巨大（32） default: normal description: 栅格列之间的间隔 group: 样式属性 brifeDoc: "" docDescription: 栅格列之间的间隔，支持无（0）、迷你（4）、小（8）、正常（16）、巨大（32）共6种间隔模式。 tooltipLink: "" slots: - concept: Slot name: default description: 插入`<u-grid-layout-column>`子组件。 support: - name: u-grid-layout-column title: 插入一列 snippet: <u-grid-layout-column :span="1"></u-grid-layout-column> - name: u-grid-layout-column title: 栅格列 description: 内部元素行内列布局 attrs: - name: media-huge title: 响应很大屏 type: number description: 响应式布局`<=1440px`的列跨越栅格数 advanced: true - name: media-large title: 响应大屏 type: number description: 响应式布局`<=1200px`的列跨越栅格数 advanced: true - name: media-medium title: 响应中屏 type: number description: 响应式布局`<=960px`的列跨越栅格数 advanced: true - name: media-small title: 响应小屏 type: number description: 响应式布局`<=768px`的列跨越栅格数 advanced: true - name: media-mini title: 响应迷你屏 type: number description: 响应式布局`<=480px`的列跨越栅格数 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/030.%E6%A0%85%E6%A0%BC%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 - gap 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 toggleclear: - justify - alignment dependency: - mode: flex 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: - 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: span title: 占据栅格数 type: number display: number default: 1 description: 列占据栅格行的栅格数 step: 1 group: 主要属性 brifeDoc: "" docDescription: 支持设置当前栅格列占据的栅格数，不能超过当前栅格行栅格数。 tooltipLink: "" - name: offset title: 偏移栅格数 type: number display: number description: 列偏移的栅格数 default: 0 step: 1 group: 主要属性 brifeDoc: "" docDescription: 支持设置栅格列偏移数，控制当前栅格列与其左侧栅格列的距离，处于当前栅格列右侧的栅格列也会同步偏移。 tooltipLink: "" - name: pull title: 左移动栅格数 type: number display: number description: 列向左移动的栅格数 default: 0 step: 1 group: 主要属性 brifeDoc: "" docDescription: 向左移动的栅格数，支持栅格互相重合。 tooltipLink: "" - name: push title: 右移动栅格数 type: number display: number description: 列向右移动的栅格数 default: 0 step: 1 group: 主要属性 brifeDoc: "" docDescription: 向右移动的栅格数，支持栅格互相重合。 tooltipLink: "" - name: wrap title: 换行 type: boolean default: true description: 设置弹性布局下子元素总宽度超出父级时子元素是否换行展示 dependency: - mode: flex group: 主要属性 brifeDoc: "" docDescription: 支持控制弹性布局模式下，子元素总宽度超过父级时是否换行展示，默认开启。 tooltipLink: "" - name: gap title: 内容间隙 type: string options: - value: shrink title: 收缩 advanced: true - value: none title: 无 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: 内容块间隙大小 dependency: - mode: flex "!justify": - space-between - space-around group: 样式属性 brifeDoc: "" docDescription: 布局内各个组件之间的间隔，通常有收缩、无、小、正常、大，默认为正常。 tooltipLink: "" slots: - concept: Slot name: default description: 插入需要布局的元素。 events: - name: responsive title: 响应窗口变化时 description: 响应式布局引发栅格变化时触发 advanced: true params: - name: $event.span type: number description: 列跨越的栅格数 - name: $event.oldSpan type: number description: 旧的列跨越的栅格数 - name: senderVM type: Vue description: 发送事件实例