mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:23:47 +09:00
100 lines
2.3 KiB
Markdown
100 lines
2.3 KiB
Markdown
---
|
|
state:
|
|
option1: true
|
|
option2: false
|
|
option3: false
|
|
option4: true
|
|
option5: false
|
|
option6: false
|
|
---
|
|
|
|
### VCheckbox
|
|
|
|
Vuero provides default styled checkboxes in 2 main styles, `outlined` (default)
|
|
and `solid`. Those checkboxes also support all main colors.
|
|
The available colors are `primary`, `success`, `info`,
|
|
`warning`, `danger`.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const option1 = ref(true)
|
|
const option2 = ref(false)
|
|
const option3 = ref(false)
|
|
const option4 = ref(true)
|
|
const option5 = ref(false)
|
|
const option6 = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VField class="is-flex">
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="option1" label="Option 1" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
v-model="option2"
|
|
label="Option 2"
|
|
color="primary"
|
|
/>
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
v-model="option3"
|
|
label="Option 3"
|
|
color="info"
|
|
/>
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
v-model="option4"
|
|
label="Option 4"
|
|
color="success"
|
|
/>
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
v-model="option5"
|
|
label="Option 5"
|
|
color="warning"
|
|
/>
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
v-model="option6"
|
|
label="Option 6"
|
|
color="danger"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField class="is-flex">
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option1" label="Option 1" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option2" label="Option 2" color="primary" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option3" label="Option 3" color="info" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option4" label="Option 4" color="success" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option5" label="Option 5" color="warning" />
|
|
</VControl>
|
|
<VControl raw subcontrol>
|
|
<VCheckbox v-model="frontmatter.state.option6" label="Option 6" color="danger" />
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|