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

Update checkbox and radio demos

pull/358/head
cagataycivici 2020-06-30 17:07:01 +03:00
parent 2b2b98633b
commit ffbc27b7f3
4 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/checkbox/CheckboxDemo.vue
View File

@ -36,11 +36,11 @@
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key">{{theme.name}}</label>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
<p>Selected Categories: <span style="font-weight: bold">{{this.selectedCategories}}</span></p>
</div>
</div>
@ -56,12 +56,12 @@ export default {
return {
checked: false,
cities: [],
themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedThemes: []
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategories: []
}
},
created() {
this.selectedThemes = this.themes.slice(1,3);
this.selectedCategories = this.categories.slice(1,3);
},
components: {
'CheckboxDoc': CheckboxDoc

30
src/views/checkbox/CheckboxDoc.vue
View File

@ -171,27 +171,27 @@ export default {
&lt;p&gt;Selected Cities : &lt;span style="font-weight: bold"&gt;{{cities}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-field-checkbox"&gt;
&lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt;
&lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
&lt;div v-for="category of categories" :key="category.key" class="p-field-checkbox"&gt;
&lt;Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/&gt;
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Selected Categories: &lt;span style="font-weight: bold"&gt;{{this.selectedCategories}}&lt;/span&gt;&lt;/p&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
checked: false,
cities: [],
themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedThemes: []
}
},
created() {
this.selectedThemes = this.themes.slice(1,3);
}
data() {
return {
checked: false,
cities: [],
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategories: []
}
},
created() {
this.selectedCategories = this.categories.slice(1,3);
}
}
</CodeHighlight>
</TabPanel>

14
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -30,11 +30,11 @@
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key">{{theme.name}}</label>
<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
<label :for="category.key">{{category.name}}</label>
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
<p>Selected Category: <span style="font-weight: bold">{{this.selectedCategory}}</span></p>
</div>
</div>
@ -49,12 +49,12 @@ export default {
data() {
return {
city: null,
themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedTheme: null
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategory: null
}
},
created() {
this.selectedTheme = this.themes[1];
this.selectedCategory = this.categories[1];
},
components: {
'RadioButtonDoc': RadioButtonDoc

30
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -156,27 +156,27 @@ export default {
&lt;/div&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{this.city}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton"&gt;
&lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt;
&lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
&lt;h5&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h5&gt;
&lt;div v-for="category of categories" :key="category.key" class="p-field-radiobutton"&gt;
&lt;RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" /&gt;
&lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Selected Category: &lt;span style="font-weight: bold"&gt;{{this.selectedCategory}}&lt;/span&gt;&lt;/p&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
city: null,
themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedTheme: null
}
},
created() {
this.selectedTheme = this.themes[1];
}
data() {
return {
city: null,
categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
selectedCategory: null
}
},
created() {
this.selectedCategory = this.categories[1];
}
}
</CodeHighlight>
</TabPanel>