mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:53:48 +09:00
142 lines
2.6 KiB
Markdown
142 lines
2.6 KiB
Markdown
---
|
|
state:
|
|
textarea: ''
|
|
---
|
|
|
|
### Focus Colors
|
|
|
|
Like other form controls, `VTextarea` can have different border colors
|
|
when focused. Simply add the appropriate color modifier class.
|
|
Available classes are `is-primary-focus`, `is-success-focus`,
|
|
`is-info-focus`, `is-warning-focus`, `is-danger-focus`.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
|
|
const textarea = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<!-- is-primary-focus -->
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
class="is-primary-focus"
|
|
rows="2"
|
|
placeholder="Primary..."
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!-- is-success-focus -->
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
class="is-success-focus"
|
|
rows="2"
|
|
placeholder="Success..."
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!-- is-info-focus -->
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
class="textarea is-info-focus"
|
|
rows="2"
|
|
placeholder="Info..."
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!-- is-warning-focus -->
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
class="textarea is-warning-focus"
|
|
rows="2"
|
|
placeholder="Warning..."
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!-- is-danger-focus -->
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="textarea"
|
|
class="textarea is-danger-focus"
|
|
rows="2"
|
|
placeholder="Danger..."
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<div>
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
class="textarea is-primary-focus"
|
|
rows="2"
|
|
placeholder="Primary..."
|
|
></VTextarea>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
class="textarea is-success-focus"
|
|
rows="2"
|
|
placeholder="Success..."
|
|
></VTextarea>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
class="textarea is-info-focus"
|
|
rows="2"
|
|
placeholder="Info..."
|
|
></VTextarea>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
class="textarea is-warning-focus"
|
|
rows="2"
|
|
placeholder="Warning..."
|
|
></VTextarea>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VTextarea
|
|
v-model="frontmatter.state.textarea"
|
|
class="textarea is-danger-focus"
|
|
rows="2"
|
|
placeholder="Danger..."
|
|
></VTextarea>
|
|
</VControl>
|
|
</VField>
|
|
</div>
|
|
|
|
<!--/example-->
|