Initial commit
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="`${checkbox.toString()}`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="`${checkboxString.toString()}`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const colorCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
|
||||
const selectedCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-x"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="tabler-alarm"
|
||||
false-icon="tabler-alarm"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-circle-x"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<AppTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<AppTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,575 @@
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const checkboxValue = { ts: `<script lang="ts" setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="\`\${checkbox.toString()}\`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="\`\${checkboxString.toString()}\`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkbox = ref(1)
|
||||
const checkboxString = ref('Show')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkbox"
|
||||
:true-value="1"
|
||||
:false-value="0"
|
||||
:label="\`\${checkbox.toString()}\`"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxString"
|
||||
true-value="Show"
|
||||
false-value="Hide"
|
||||
color="success"
|
||||
:label="\`\${checkboxString.toString()}\`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const colors = { ts: `<script lang="ts" setup>
|
||||
const colorCheckbox = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
|
||||
const selectedCheckbox = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const colorCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
|
||||
const selectedCheckbox = ref([
|
||||
'Primary',
|
||||
'Secondary',
|
||||
'Success',
|
||||
'Info',
|
||||
'Warning',
|
||||
'Error',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-for="color in colorCheckbox"
|
||||
:key="color"
|
||||
v-model="selectedCheckbox"
|
||||
:label="color"
|
||||
:color="color.toLowerCase()"
|
||||
:value="color"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<script lang="ts" setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxOne = ref(true)
|
||||
const checkboxTwo = ref(false)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="checkboxOne"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxOne)"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="checkboxTwo"
|
||||
density="compact"
|
||||
:label="capitalizedLabel(checkboxTwo)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icon = { ts: `<script lang="ts" setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = (label: boolean) => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-x"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="tabler-alarm"
|
||||
false-icon="tabler-alarm"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-circle-x"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const toggleCheckboxOne = ref(true)
|
||||
const toggleCheckboxTwo = ref(true)
|
||||
const toggleCheckboxThree = ref(true)
|
||||
|
||||
const capitalizedLabel = label => {
|
||||
const convertLabelText = label.toString()
|
||||
|
||||
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxOne"
|
||||
:label="capitalizedLabel(toggleCheckboxOne)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-x"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxTwo"
|
||||
:label="capitalizedLabel(toggleCheckboxTwo)"
|
||||
true-icon="tabler-alarm"
|
||||
false-icon="tabler-alarm"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleCheckboxThree"
|
||||
:label="capitalizedLabel(toggleCheckboxThree)"
|
||||
true-icon="tabler-check"
|
||||
false-icon="tabler-circle-x"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inlineTextField = { ts: `<script lang="ts" setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<AppTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<AppTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const includeFiles = ref(true)
|
||||
const isInputEnabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
sm="1"
|
||||
cols="2"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="includeFiles" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
sm="11"
|
||||
cols="10"
|
||||
>
|
||||
<AppTextField
|
||||
label="Include files"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="2"
|
||||
sm="1"
|
||||
class="d-flex align-end"
|
||||
>
|
||||
<VCheckbox v-model="isInputEnabled" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="10"
|
||||
sm="11"
|
||||
>
|
||||
<AppTextField
|
||||
:disabled="!isInputEnabled"
|
||||
label="I only work if you check the box"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const labelSlot = { ts: `<script lang="ts" setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCheckbox v-model="checkbox">
|
||||
<template #label>
|
||||
<div>
|
||||
I agree that
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<a
|
||||
href="https://vuetifyjs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
v-bind="props"
|
||||
@click.stop
|
||||
>
|
||||
Vuetify
|
||||
</a>
|
||||
</template>
|
||||
Opens in new window
|
||||
</VTooltip>
|
||||
is awesome
|
||||
</div>
|
||||
</template>
|
||||
</VCheckbox>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const modelAsArray = { ts: `<script lang="ts" setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const selected = ref(['John'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="John"
|
||||
value="John"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Jacob"
|
||||
color="success"
|
||||
value="Jacob"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="selected"
|
||||
label="Johnson"
|
||||
color="info"
|
||||
value="Johnson"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1">
|
||||
{{ selected }}
|
||||
</p>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const states = { ts: `<script setup lang="ts">
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const toggleCheckbox = ref(true)
|
||||
const toggleIndeterminateCheckbox = ref(true)
|
||||
const disabledCheckbox = ref(true)
|
||||
const toggleOffCheckbox = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VCheckbox
|
||||
v-model="toggleCheckbox"
|
||||
label="On"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model="toggleOffCheckbox"
|
||||
label="Off"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
v-model:indeterminate="toggleIndeterminateCheckbox"
|
||||
v-model="toggleIndeterminateCheckbox"
|
||||
label="Indeterminate"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
:model-value="disabledCheckbox"
|
||||
disabled
|
||||
label="On disabled"
|
||||
/>
|
||||
|
||||
<VCheckbox
|
||||
disabled
|
||||
label="Off disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user