67 lines
1.8 KiB
Markdown
67 lines
1.8 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"
|
|
/>
|
|
```
|
|
|
|
<ClientOnly>
|
|
<Textarea v-model="text1" />
|
|
</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>
|