Checkbox rtl demo updates

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:45:31 +03:00
parent 3317ebbb23
commit 3fef2836e2
3 changed files with 69 additions and 69 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>