mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
ade87f6729
* docs: standardize unified example code format and fix some example type * docs: update some example type * Update docs/examples/descriptions/sizes.vue Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * docs: update example-page-header * docs: update example-page-header --------- Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<div style="margin-bottom: 15px">
|
|
direction:
|
|
<el-radio v-model="direction" value="horizontal">horizontal</el-radio>
|
|
<el-radio v-model="direction" value="vertical">vertical</el-radio>
|
|
</div>
|
|
<div style="margin-bottom: 15px">
|
|
fillRatio:<el-slider v-model="fillRatio" />
|
|
</div>
|
|
<el-space
|
|
fill
|
|
wrap
|
|
:fill-ratio="fillRatio"
|
|
:direction="direction"
|
|
style="width: 100%"
|
|
>
|
|
<el-card v-for="i in 5" :key="i" class="box-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>Card name</span>
|
|
<el-button class="button" text>Operation button</el-button>
|
|
</div>
|
|
</template>
|
|
<div v-for="o in 4" :key="o" class="text item">
|
|
{{ 'List item ' + o }}
|
|
</div>
|
|
</el-card>
|
|
</el-space>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import type { SpaceInstance } from 'element-plus'
|
|
|
|
const direction = ref<SpaceInstance['direction']>('horizontal')
|
|
const fillRatio = ref(30)
|
|
</script>
|