69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
||
<div class="demo">
|
||
<section class="block">
|
||
<h4 v-text="'水平（默认 medium）'" />
|
||
<space>
|
||
<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
|
||
</space>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<h4 v-text="'预设尺寸 small / large'" />
|
||
<space size="small">
|
||
<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
|
||
</space>
|
||
<space size="large">
|
||
<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
|
||
</space>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<h4 v-text="'垂直排列'" />
|
||
<space direction="vertical">
|
||
<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
|
||
</space>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<h4 v-text="'分隔符'" />
|
||
<space separator="|">
|
||
<span v-for="item in 3" :key="item" v-text="`项 ${item}`" />
|
||
</space>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { Space } from "timi-tdesign-mobile";
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.demo {
|
||
.block {
|
||
margin-bottom: 1.25rem;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
margin: 0 0 .5rem;
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.box {
|
||
padding: .375rem .625rem;
|
||
font-size: .75rem;
|
||
border-radius: .375rem;
|
||
color: var(--vp-c-brand-1);
|
||
background: var(--vp-c-default-soft);
|
||
}
|
||
|
||
span {
|
||
font-size: .75rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
}
|
||
</style>
|