cloud-ui.vusion
Version:
Vusion Cloud UI
94 lines (92 loc) • 3.76 kB
Markdown
### 测试多种布局属性影响
``` vue
<template>
<div>
<u-linear-layout direction="vertical">
<u-linear-layout direction="vertical">
<u-linear-layout>
<u-label>布局模式：</u-label>
<u-select v-model="mode" clearable>
<u-select-item value="inline">行内</u-select-item>
<u-select-item value="block">块级</u-select-item>
<u-select-item value="flex">弹性</u-select-item>
</u-select>
</u-linear-layout>
<u-linear-layout>
<u-label>方向：</u-label>
<u-select v-model="direction" clearable>
<u-select-item value="horizontal">横向排列</u-select-item>
<u-select-item value="vertical">纵向排列</u-select-item>
</u-select>
</u-linear-layout>
<u-linear-layout>
<u-label>子元素展示方式：</u-label>
<u-select v-model="layout" clearable>
<u-select-item value="inline">行内</u-select-item>
<u-select-item value="block">块级</u-select-item>
</u-select>
</u-linear-layout>
<u-linear-layout>
<u-label>主轴对齐方式：</u-label>
<u-select v-model="justify" clearable>
<u-select-item value="start">左对齐</u-select-item>
<u-select-item value="center">居中对齐</u-select-item>
<u-select-item value="end">右对齐</u-select-item>
<u-select-item value="space-between">各行之间留有空</u-select-item>
<u-select-item value="space-around">之前、之间、之后都留有空白</u-select-item>
</u-select>
</u-linear-layout>
<u-linear-layout>
<u-label>纵轴对齐方式：</u-label>
<u-select v-model="alignment" clearable>
<u-select-item value="start">头对齐</u-select-item>
<u-select-item value="center">居中对齐</u-select-item>
<u-select-item value="end">尾对齐</u-select-item>
<u-select-item value="baseline">基线对齐</u-select-item>
<u-select-item value="stretch">拉伸子元素充满整个父元素空间</u-select-item>
</u-select>
</u-linear-layout>
<u-linear-layout>
<u-label>是否换行：</u-label>
<u-switch v-model="wrap"></u-switch>
</u-linear-layout>
</u-linear-layout>
<u-linear-layout
:mode="mode"
:direction="direction"
:justify="justify"
:alignment="alignment"
:layout="layout"
:wrap="wrap"
style="height:300px;border: 1px solid #aaa; padding: 20px; margin: 20px;">
<u-panel>1</u-panel>
<u-panel>2</u-panel>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
<u-button>3</u-button>
</u-linear-layout>
</u-linear-layout>
</div>
</template>
<script>
export default {
data() {
return {
mode: 'block',
direction: undefined,
justify: undefined,
alignment: undefined,
layout:undefined,
wrap: true
}
},
}
</script>
```