MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs(ui-docs): document `v` and `h` props in Spacer

This commit is contained in:
upsiflu 2025-01-27 10:06:16 +01:00
parent 55b6de8654
commit a7f67654e8
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/ui-docs/components/ui/layout/spacer.md
View File

@ -159,8 +159,22 @@ Note the `+` before `size`. Some browsers will output a string for the `Input` v
</div> </div>
</Layout> </Layout>
## Restrict the dimension of a spacer with the `v` and `h` props
By default, a spacer is square. You can make it horizontal with `h` and vertical with `v`. See the example in the following section.
## Use the Spacer to vary an element's dimensions ## Use the Spacer to vary an element's dimensions
```vue-html
<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 flex style="align-items:flex-start"> <Layout flex style="align-items:flex-start">
<Input v-model="size" type="range" /> <Input v-model="size" type="range" />
<Card min-content title="h"> <Card min-content title="h">