mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 20:03:29 +09:00
80 lines
1.8 KiB
Markdown
80 lines
1.8 KiB
Markdown
---
|
|
state:
|
|
textarea: ''
|
|
---
|
|
|
|
### VTextarea addon
|
|
|
|
`VTextarea` that are wrapped by a control and a field can have a single
|
|
bottom addon. You can use it to display a toolbar or any type of user actions.
|
|
Use the `textaddon` prop on the `<VField />` and the second `<VControl />`
|
|
component. Please refer to the code example for more details about usage.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
|
|
const textarea = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<VField textaddon>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
rows="4"
|
|
placeholder="A longer message..."
|
|
/>
|
|
</VControl>
|
|
|
|
<VControl textaddon>
|
|
<div class="start">
|
|
<div class="avatar-stack">
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
|
|
<VAvatar
|
|
initials="JO"
|
|
color="info"
|
|
size="small"
|
|
/>
|
|
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" />
|
|
</div>
|
|
</div>
|
|
<div class="end">
|
|
<VButton color="primary" raised>
|
|
Post Comment
|
|
</VButton>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField textaddon>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
rows="4"
|
|
placeholder="A longer message..."
|
|
></VTextarea>
|
|
</VControl>
|
|
<VControl textaddon>
|
|
<div class="start">
|
|
<div class="avatar-stack">
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
|
|
<VAvatar initials="JO" color="info" size="small" />
|
|
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" />
|
|
</div>
|
|
</div>
|
|
<div class="end">
|
|
<VButton color="primary" raised>Post Comment</VButton>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|