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

chore(ui-docs): add example code to input docs

This commit is contained in:
upsiflu 2024-12-29 17:52:02 +01:00
parent bb4fbd6e50
commit 77090134d5
1 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
front/ui-docs/components/ui/input.md
View File

@ -57,14 +57,19 @@ You can add a template on the right-hand side of the input to guide the user's i
### Search
```vue-html
<Input search />
```
<Input search />
### Password
```vue-html
<Layout flex no-gap style="align-items:flex-end">
<Spacer v
:size="80"
style="outline:1px solid red; align-self: baseline;"
style="align-self: baseline;"
/>
<Input>
<template #label>
@ -75,7 +80,7 @@ You can add a template on the right-hand side of the input to guide the user's i
<Layout flex no-gap style="align-items:flex-end">
<Spacer v
:size="80"
style="outline:1px solid red; align-self: baseline;"
style="align-self: baseline;"
/>
<Input password>
<template #label>
@ -83,3 +88,43 @@ You can add a template on the right-hand side of the input to guide the user's i
</template>
</Input>
</Layout>
```
<!-- Implement a component for baseline alignments like this -->
<Layout flex no-gap style="align-items:flex-end">
<Spacer v
:size="80"
style="align-self: baseline;"
/>
<Input>
<template #label>
User name
</template>
</Input>
</Layout>
<Layout flex no-gap style="align-items:flex-end">
<Spacer v
:size="80"
style="align-self: baseline;"
/>
<Input password>
<template #label>
Password
</template>
</Input>
</Layout>
## Fallthrough attributes
If you add attributes that are no props, they will be added to the component:
```vue-html
<Input required
field-id="password-field"
/>
```
<Input required
field-id="password-field"
/>