kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
169 wiersze
3.0 KiB
Markdown
169 wiersze
3.0 KiB
Markdown
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import Alert from '~/components/ui/Alert.vue'
|
||
import Layout from '~/components/ui/Layout.vue'
|
||
import Spacer from '~/components/ui/layout/Spacer.vue'
|
||
import Input from '~/components/ui/Input.vue'
|
||
import Card from '~/components/ui/Card.vue'
|
||
|
||
const size = ref(32)
|
||
</script>
|
||
|
||
<style>
|
||
.preview {
|
||
padding:16px 0;
|
||
flex-grow:1;
|
||
}
|
||
</style>
|
||
|
||
# Spacer
|
||
|
||
Add a 16px gap between adjacent items.
|
||
|
||
##### Without spacer:
|
||
|
||
<Layout flex>
|
||
|
||
```vue-html
|
||
<Alert green">A</Alert>
|
||
<Alert red">B</Alert>
|
||
```
|
||
|
||
<div class="preview">
|
||
|
||
<Alert green>A</Alert>
|
||
<Alert purple>B</Alert>
|
||
|
||
</div>
|
||
|
||
</Layout>
|
||
|
||
##### With spacer:
|
||
|
||
<Layout flex>
|
||
|
||
```vue-html{2}
|
||
<Alert green">A</Alert>
|
||
<Spacer/>
|
||
<Alert red">B</Alert>
|
||
```
|
||
|
||
<div class="preview">
|
||
<Alert green>A</Alert>
|
||
<Spacer/>
|
||
<Alert purple>B</Alert>
|
||
</div>
|
||
|
||
</Layout>
|
||
|
||
##### Spacers can also be added for horizontal space:
|
||
|
||
<Layout flex>
|
||
|
||
```vue-html{4}
|
||
<Layout flex>
|
||
<Alert blue">A</Alert>
|
||
<Alert yellow">B</Alert>
|
||
<Spacer/>
|
||
<Alert red">C</Alert>
|
||
</Layout>
|
||
```
|
||
|
||
<div class="preview">
|
||
<Layout flex>
|
||
<Alert blue>A</Alert>
|
||
<Alert yellow>B</Alert>
|
||
<Spacer/>
|
||
<Alert red>C</Alert>
|
||
</Layout>
|
||
</div>
|
||
</Layout>
|
||
|
||
## Modify the size of a Spacer
|
||
|
||
<Layout flex>
|
||
|
||
```vue
|
||
<script setup>
|
||
const size = ref(1);
|
||
</script>
|
||
|
||
<template>
|
||
<Input v-model="size" type="range" />
|
||
|
||
<Alert yellow>A</Alert>
|
||
<Spacer :size="size" />
|
||
<Alert purple>B</Alert>
|
||
</template>
|
||
```
|
||
|
||
<div class="preview">
|
||
<Input v-model="size" type="range" style="writing-mode: vertical-lr; direction: rtl"/>
|
||
{{ size }}px
|
||
</div>
|
||
<div class="preview">
|
||
<Alert yellow>A</Alert>
|
||
<Spacer :size="size" />
|
||
<Alert purple>B</Alert>
|
||
</div>
|
||
</Layout>
|
||
|
||
## Make the Spacer elastic (responsive)
|
||
|
||
<Layout flex>
|
||
|
||
```vue-html
|
||
<Layout flex style="height:30em;">
|
||
<Input v-model="size"
|
||
type="range"
|
||
style="writing-mode: vertical-lr; height:100%"
|
||
/>
|
||
|
||
<Layout stack no-gap
|
||
:style="{ height: size + '%' }"
|
||
>
|
||
<Alert blue>A</Alert>
|
||
<Spacer grow title="grow" />
|
||
<Alert red>B</Alert>
|
||
<Alert green>C</Alert>
|
||
<Spacer shrink title="shrink" />
|
||
<Alert purple>D</Alert>
|
||
<Spacer grow shrink title="grow shrink" />
|
||
<Alert yellow>E</Alert>
|
||
</Layout>
|
||
</Layout>
|
||
```
|
||
|
||
<div class="preview" style="flex-wrap:nowrap">
|
||
<Layout flex style="height:30em">
|
||
|
||
<Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>
|
||
|
||
<Layout stack no-gap :style="{ height: size + '%'}">
|
||
<Alert blue>A</Alert>
|
||
<Spacer grow title="grow" />
|
||
<Alert red>B</Alert>
|
||
<Alert green>C</Alert>
|
||
<Spacer shrink title="shrink" />
|
||
<Alert purple>D</Alert>
|
||
<Spacer grow shrink title="grow shrink" />
|
||
<Alert yellow>E</Alert>
|
||
</Layout>
|
||
|
||
</Layout>
|
||
|
||
</div>
|
||
</Layout>
|
||
|
||
## Use the Spacer to vary an element's dimensions
|
||
|
||
<Layout flex style="align-items:flex-start">
|
||
<Input v-model="size" type="range" />
|
||
<Card min-content title="h">
|
||
<Spacer h :size="size * 4" style="border:5px dashed;" />
|
||
</Card>
|
||
<Card min-content title="v">
|
||
<Spacer v :size="size * 4" style="border:5px dashed;" />
|
||
</Card>
|
||
</Layout>
|