192 lines
3.5 KiB
Markdown
192 lines
3.5 KiB
Markdown
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
|
|
import Pill from '~/components/ui/Pill.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
|
|
const customTag=ref('Custom Tag')
|
|
const isDeleted = computed(() => customTag.value==='' ? 'Pill was deleted' : '')
|
|
</script>
|
|
|
|
```ts
|
|
import Pill from "~/components/ui/Pill.vue"
|
|
```
|
|
|
|
# Pill
|
|
|
|
Pills are decorative elements that display information about content they attach to. They can be links to other content or simple colored labels.
|
|
|
|
You can add text to pills by adding it between the `<Pill>` tags. Alternatively, you can set `v-model` and [make the pill editable](#editable-pill).
|
|
|
|
| Prop | Data type | Required? | Default | Description |
|
|
| ------- | ----------------------------------------------------------------------------------------------- | --------- | ----------- | ---------------------- |
|
|
| `color` | `primary` \| `secondary` \| `destructive` \| `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | Renders a colored pill |
|
|
|
|
-> [Let the user create lists of pills](./pills)
|
|
|
|
### Primary
|
|
|
|
Primary pills convey **positive** information.
|
|
|
|
```vue-html
|
|
<Pill primary>
|
|
Primary pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill primary>
|
|
Primary pill
|
|
</Pill>
|
|
|
|
### Secondary
|
|
|
|
Secondary pills convey **neutral** or simple decorational information such as genre tags.
|
|
|
|
::: info
|
|
This is the default type for pills. If you don't specify a type, a **secondary** pill is rendered.
|
|
:::
|
|
|
|
```vue-html
|
|
<Pill>
|
|
Secondary pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill>
|
|
Secondary pill
|
|
</Pill>
|
|
|
|
### Destructive
|
|
|
|
Destructive pills convey **destructive** or **negative** information. Use these to indicate that information could cause issues such as data loss.
|
|
|
|
```vue-html
|
|
<Pill destructive>
|
|
Destructive pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill destructive>
|
|
Destructive pill
|
|
</Pill>
|
|
|
|
## Pill colors
|
|
|
|
Funkwhale pills support a range of pastel colors to create visually appealing interfaces.
|
|
|
|
### Blue
|
|
|
|
```vue-html
|
|
<Pill blue>
|
|
Blue pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill blue>
|
|
Blue pill
|
|
</Pill>
|
|
|
|
### Red
|
|
|
|
```vue-html
|
|
<Pill red>
|
|
Red pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill red>
|
|
Red pill
|
|
</Pill>
|
|
|
|
### Purple
|
|
|
|
```vue-html
|
|
<Pill purple>
|
|
Purple pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill purple>
|
|
Purple pill
|
|
</Pill>
|
|
|
|
### Green
|
|
|
|
```vue-html
|
|
<Pill green>
|
|
Green pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill green>
|
|
Green pill
|
|
</Pill>
|
|
|
|
### Yellow
|
|
|
|
```vue-html
|
|
<Pill yellow>
|
|
Yellow pill
|
|
</Pill>
|
|
```
|
|
|
|
<Pill yellow>
|
|
Yellow pill
|
|
</Pill>
|
|
|
|
## Image pill
|
|
|
|
Image pills contain a small circular image on their left. These can be used for decorative links such as artist links. To created an image pill, insert a link to the image between the pill tags as a `<template>`.
|
|
|
|
```vue-html{2-4}
|
|
<Pill>
|
|
<template #image>
|
|
<div style="background-color: #0004" />
|
|
</template>
|
|
Awesome artist
|
|
</Pill>
|
|
```
|
|
|
|
<Pill>
|
|
<template #image>
|
|
<div style="background-color: #0004" />
|
|
</template>
|
|
Awesome artist
|
|
</Pill>
|
|
|
|
## Editable pill
|
|
|
|
Add `v-model="..."` to link the pill content to a `ref`.
|
|
|
|
```ts
|
|
import { ref } from "vue"
|
|
const customTag = ref("Custom Tag")
|
|
```
|
|
|
|
```vue-html
|
|
<Pill v-model="customTag" />
|
|
|
|
<Button primary low-height
|
|
:disabled="customTag === ''"
|
|
:onClick="() => customTag = ''"
|
|
>
|
|
Reset: {{ customTag }}
|
|
</Button>
|
|
|
|
```
|
|
|
|
<Pill no-underline v-model="customTag" />
|
|
|
|
Edit the text, then hit Enter or click outside. The button will show the updated text.
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<Button primary low-height
|
|
:disabled="customTag === ''"
|
|
:onClick="() => customTag = ''"
|
|
>
|
|
Reset: {{ customTag }}
|
|
</Button>
|
|
|
|
<!-- prettier-ignore-end -->
|