vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Pages router changes

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-10 17:15:16 +03:00
parent 4d55806088
commit 78f9040681
42 changed files with 814 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

59
pages/selectbutton/SelectButtonDemo.vue
View file

@ -1,59 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>SelectButton</h1>
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5 id="single">Single Selection</h5>
<SelectButton v-model="value1" :options="options" aria-labelledby="single" />
<h5 id="multiple">Multiple Selection</h5>
<SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple aria-labelledby="multiple" />
<h5 id="custom">Custom Content</h5>
<SelectButton v-model="value3" :options="justifyOptions" optionLabel="value" dataKey="value" aria-labelledby="custom">
<template #option="slotProps">
<i :class="slotProps.option.icon"></i>
</template>
</SelectButton>
</div>
</div>
<SelectButtonDoc />
</div>
</template>
<script>
import SelectButtonDoc from './SelectButtonDoc';
export default {
data() {
return {
value1: 'Off',
value2: null,
value3: null,
options: ['Off', 'On'],
paymentOptions: [
{ name: 'Option 1', value: 1 },
{ name: 'Option 2', value: 2 },
{ name: 'Option 3', value: 3 }
],
justifyOptions: [
{ icon: 'pi pi-align-left', value: 'Left' },
{ icon: 'pi pi-align-right', value: 'Right' },
{ icon: 'pi pi-align-center', value: 'Center' },
{ icon: 'pi pi-align-justify', value: 'Justify' }
]
};
},
components: {
SelectButtonDoc: SelectButtonDoc
}
};
</script>