Checkbox rtl demo updates
parent
3317ebbb23
commit
3fef2836e2
|
@ -4,9 +4,9 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -26,7 +26,7 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
|
@ -35,7 +35,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
|
@ -63,7 +63,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center">
|
||||
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
|
|
|
@ -6,21 +6,21 @@
|
|||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese" class="ml-2"> Cheese </label>
|
||||
<label for="cheese"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom" class="ml-2"> Mushroom </label>
|
||||
<label for="mushroom"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="pepper" value="Pepper" />
|
||||
<label for="pepper" class="ml-2"> Pepper </label>
|
||||
<label for="pepper"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="onion" value="Onion" />
|
||||
<label for="onion" class="ml-2"> Onion </label>
|
||||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
|
@ -52,21 +52,21 @@ export default {
|
|||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese" class="ml-2"> Cheese </label>
|
||||
<label for="cheese"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom" class="ml-2"> Mushroom </label>
|
||||
<label for="mushroom"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="pepper" value="Pepper" />
|
||||
<label for="pepper" class="ml-2"> Pepper </label>
|
||||
<label for="pepper"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="onion" value="Onion" />
|
||||
<label for="onion" class="ml-2"> Onion </label>
|
||||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
|
@ -81,21 +81,21 @@ export default {
|
|||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese" class="ml-2"> Cheese </label>
|
||||
<label for="cheese"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom" class="ml-2"> Mushroom </label>
|
||||
<label for="mushroom"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="pepper" value="Pepper" />
|
||||
<label for="pepper" class="ml-2"> Pepper </label>
|
||||
<label for="pepper"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="onion" value="Onion" />
|
||||
<label for="onion" class="ml-2"> Onion </label>
|
||||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
|
@ -141,21 +141,21 @@ export default {
|
|||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese" class="ml-2"> Cheese </label>
|
||||
<label for="cheese"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom" class="ml-2"> Mushroom </label>
|
||||
<label for="mushroom"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="pepper" value="Pepper" />
|
||||
<label for="pepper" class="ml-2"> Pepper </label>
|
||||
<label for="pepper"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox inputId="onion" value="Onion" />
|
||||
<label for="onion" class="ml-2"> Onion </label>
|
||||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
|
|
|
@ -3,21 +3,21 @@
|
|||
<p>Multiple checkboxes can be grouped together.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
<label for="ingredient1"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
<label for="ingredient2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
<label for="ingredient3"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
<label for="ingredient4"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
@ -31,42 +31,42 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
<label for="ingredient1"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
<label for="ingredient2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
<label for="ingredient3"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
<label for="ingredient4"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
<label for="ingredient1"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
<label for="ingredient2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
<label for="ingredient3"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
<label for="ingredient4"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -84,21 +84,21 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
<label for="ingredient1"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
<label for="ingredient2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
<label for="ingredient3"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
<label for="ingredient4"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue