kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
92 wiersze
2.3 KiB
Markdown
92 wiersze
2.3 KiB
Markdown
<script setup lang="ts">
|
|
import Textarea from '~/components/ui/Textarea.vue'
|
|
|
|
import { ref } from 'vue'
|
|
|
|
const text1 = ref('# Funk\nwhale')
|
|
const text2 = ref('# Funk\nwhale')
|
|
const text3 = ref('')
|
|
</script>
|
|
|
|
# Textarea
|
|
|
|
Textareas are input blocks that enable users to write in textual information. These blocks are used throughout the Funkwhale interface for entering item descriptions, moderation notes, and custom notifications.
|
|
|
|
::: tip
|
|
Funkwhale supports Markdown syntax in textarea blocks.
|
|
:::
|
|
|
|
| Prop | Data type | Required? | Description |
|
|
| --------------- | --------- | --------- | ------------------------------------------------------------------ |
|
|
| `max` | Number | No | The maximum number of characters a user can enter in the textarea. |
|
|
| `placeholder` | String | No | The placeholder text shown on an empty textarea. |
|
|
| `v-model:value` | String | Yes | The text entered into the textarea. |
|
|
|
|
## Textarea model
|
|
|
|
Create a textarea and attach its input to a value using a `v-model` directive.
|
|
|
|
```vue-html{2}
|
|
<Textarea
|
|
v-model="text" label="My Area"
|
|
/>
|
|
```
|
|
|
|
<ClientOnly>
|
|
<Textarea v-model="text1" label="My Area"/>
|
|
</ClientOnly>
|
|
|
|
## Textarea max length
|
|
|
|
You can set the maximum length (in characters) that a user can enter in a textarea by passing a `max` prop.
|
|
|
|
```vue-html{3}
|
|
<Textarea
|
|
v-model="text"
|
|
:max="20"
|
|
/>
|
|
```
|
|
|
|
<ClientOnly>
|
|
<Textarea v-model="text2" :max="20" />
|
|
</ClientOnly>
|
|
|
|
## Textarea placeholder
|
|
|
|
Add a placeholder to a textarea to guide users on what they should enter by passing a `placeholder` prop.
|
|
|
|
```vue-html{3}
|
|
<Textarea
|
|
v-model="text"
|
|
placeholder="Describe this track here…"
|
|
/>
|
|
```
|
|
|
|
<ClientOnly>
|
|
<Textarea v-model="text3" placeholder="Describe this track here…" />
|
|
</ClientOnly>
|
|
|
|
## Label slot
|
|
|
|
```vue-html{2-4}
|
|
<Textarea>
|
|
<template #label>
|
|
About my music
|
|
</template>
|
|
</Textarea>
|
|
```
|
|
|
|
<Textarea>
|
|
<template #label>
|
|
About my music <span style="color:red; float:right;">*required</span>
|
|
</template>
|
|
</Textarea>
|
|
|
|
If you just have a string, we have a convenience prop, so instead you can write:
|
|
|
|
```vue-html
|
|
<Textarea label="About my music" />
|
|
```
|
|
|
|
<Textarea label="About my music" />
|