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): [WIP] #2390 test pills regressions

This commit is contained in:
upsiflu 2025-02-21 09:53:09 +01:00
parent 6bdae01dcd
commit 19206d696e
1 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
front/ui-docs/components/ui/pills.md
View File

@ -2,6 +2,7 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import Pills from '~/components/ui/Pills.vue'; import Pills from '~/components/ui/Pills.vue';
import Spacer from '~/components/ui/Spacer.vue';
import Layout from '~/components/ui/Layout.vue'; import Layout from '~/components/ui/Layout.vue';
import Input from '~/components/ui/Input.vue'; import Input from '~/components/ui/Input.vue';
@ -23,6 +24,8 @@ const customModel = ref({
others: ["#Melody", "#Rhythm"], others: ["#Melody", "#Rhythm"],
custom: ["custom"], custom: ["custom"],
}); });
const search = ref()
</script> </script>
```ts ```ts
@ -116,3 +119,35 @@ const customModel = ref({
<Layout class="preview" style="padding:16px"> <Layout class="preview" style="padding:16px">
<Pills v-model="customModel" label="Custom" /> <Pills v-model="customModel" label="Custom" />
</Layout> </Layout>
## Combine Pills with other input fields
<Spacer />
<Layout form flex>
<Input
v-model="search"
label="Search"
style="max-width: 150px;"
/>
<Pills
v-model="customModel"
label="Filter by tags"
style="max-width: 250px;"
/>
<Layout stack noGap label>
<span class="label"> Ordering </span>
<select>
<option
v-for="key in ['by date', 'by duration']"
:value="key"
>
key
</option>
</select>
</Layout>
<Input
v-model="search"
label="Option"
style="max-width: 50px;"
/>
</Layout>