vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

RadioButton rtl demo updates

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:25:44 +03:00
parent 2fc29287ff
commit caab6a672a
3 changed files with 72 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/showcase/doc/radiobutton/DynamicDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center"> <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -26,18 +26,18 @@ export default {
selectedCategory: 'Production', selectedCategory: 'Production',
code: { code: {
basic: ` basic: `
<div v-for="category in categories" :key="category.key" class="flex items-center"> <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center"> <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -63,9 +63,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center"> <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
</div> </div>
</div> </div>

64
apps/showcase/doc/radiobutton/FormsDoc.vue
View File

@ -5,21 +5,21 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" /> <RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" /> <RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" /> <RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" /> <RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@ -48,21 +48,21 @@ export default {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" /> <RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" /> <RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" /> <RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" /> <RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@ -74,21 +74,21 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" /> <RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" /> <RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" /> <RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" /> <RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@ -130,21 +130,21 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" /> <RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" /> <RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" /> <RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" /> <RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>

64
apps/showcase/doc/radiobutton/GroupDoc.vue
View File

@ -4,21 +4,21 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" /> <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" /> <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" /> <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" /> <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</div> </div>
</div> </div>
@ -33,21 +33,21 @@ export default {
code: { code: {
basic: ` basic: `
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" /> <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" /> <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" /> <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" /> <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</div> </div>
`, `,
@ -55,21 +55,21 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" /> <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" /> <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" /> <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" /> <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</div> </div>
</div> </div>
@ -89,21 +89,21 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" /> <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label> <label for="ingredient1">Cheese</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" /> <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label> <label for="ingredient2">Mushroom</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" /> <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label> <label for="ingredient3">Pepper</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" /> <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label> <label for="ingredient4">Onion</label>
</div> </div>
</div> </div>
</div> </div>