cloud-ui.vusion
Version:
Vusion Cloud UI
78 lines (76 loc) • 3.19 kB
Markdown
### 测试多种布局属性影响
``` vue
<template>
<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="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="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-multi-layout
:justify="justify"
:alignment="alignment"
:direction="direction">
<u-multi-layout-item style="height: 60px;">
<u-block>1</u-block>
</u-multi-layout-item>
<u-multi-layout-item>
<u-multi-layout>
<u-multi-layout-item style="width: 200px;">
<u-panel>1</u-panel>
<u-panel>2</u-panel>
<u-panel>3</u-panel>
</u-multi-layout-item>
<u-multi-layout-item :mode="mode">
<u-panel>1</u-panel>
<u-panel>2</u-panel>
<u-panel>3</u-panel>
</u-multi-layout-item>
</u-multi-layout>
</u-multi-layout-item>
</u-multi-layout>
</u-linear-layout>
</template>
<script>
export default {
data() {
return {
justify: undefined,
alignment: undefined,
mode: undefined,
direction: undefined,
}
},
}
</script>
```