svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 04:22:25 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
documentation/elements/forms/textarea/textarea-addon-documentation.md Normal file
View File

@@ -0,0 +1,79 @@
---
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-->

49
documentation/elements/forms/textarea/textarea-base-documentation.md Normal file
View File

@@ -0,0 +1,49 @@
---
state:
textarea: ''
---
### VTextarea
Vuero provides elegant form controls with minimum styling.
`VTextarea` accept all attributes that `<textarea>` accepts.
You can control the box text length with the `rows="*"` attribute.
Always wrap your inputs inside a `<VField />` and a `<VControl />`
to build forms quickly and efficiently.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
</script>
<template>
<VField>
<VControl>
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VTextarea
rows="4"
placeholder="A longer message..."
v-model="frontmatter.state.textarea"
></VTextarea>
</VControl>
</VField>
<!--/example-->

51
documentation/elements/forms/textarea/textarea-disabled-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
---
state:
textarea: ''
disabled: true
---
### Disabled
A `VTextarea` can be shown in a disabled state. For that, you need to wrap it
inside a `<VControl />` component. Simply add the `disabled` attribute
to the target textarea element.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
const disabled = ref(true)
</script>
<template>
<VField>
<VControl>
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
:disabled="disabled"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
rows="4"
placeholder="A longer message..."
:disabled="frontmatter.state.disabled"
></VTextarea>
</VControl>
</VField>
<!--/example-->

141
documentation/elements/forms/textarea/textarea-focus-documentation.md Normal file
View File

@@ -0,0 +1,141 @@
---
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-->

43
documentation/elements/forms/textarea/textarea-loading-documentation.md Normal file
View File

@@ -0,0 +1,43 @@
### Loading
A `VTextarea` can be shown in a loading state. For that, you need to wrap
it inside a control element. Then, simply add the `loading` prop to the
wrapping `<VControl />` component.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
const loading = ref(true)
</script>
<template>
<VField>
<VControl :loading="loading">
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl loading>
<VTextarea
rows="4"
placeholder="A longer message..."
></VTextarea>
</VControl>
</VField>
<!--/example-->