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

Update select button

pull/358/head
cagataycivici 2020-07-01 17:40:24 +03:00
parent e37b4ec1bf
commit 820c9267be
4 changed files with 45 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/flags_responsive.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 80 KiB

2
src/assets/styles/app/_demo.scss
View File

@ -118,7 +118,7 @@
align-items: center; align-items: center;
img.flag { img.flag {
width: 28px; width: 18px;
margin-right: .5rem; margin-right: .5rem;
} }
} }

59
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -9,24 +9,18 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Single</h5> <h5>Single Selection</h5>
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /> <SelectButton v-model="value1" :options="options" />
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
<h5>Multiple</h5> <h5>Multiple Selection</h5>
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" /> <SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
<h5>Custom Content</h5> <h5>Custom Content</h5>
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"> <SelectButton v-model="value3" :options="justifyOptions">
<template #option="slotProps"> <template #option="slotProps">
<div class="car-option"> <i :class="slotProps.option.icon"></i>
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template> </template>
</SelectButton> </SelectButton>
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
</div> </div>
</div> </div>
@ -40,39 +34,24 @@ import SelectButtonDoc from './SelectButtonDoc';
export default { export default {
data() { data() {
return { return {
selectedCity: null, value1: 'Off',
selectedCar: null, value2: null,
selectedCars: null, value3: null,
cities: [ options: ['Off', 'On'],
{name: 'London', code: 'LND'}, paymentOptions: [
{name: 'Paris', code: 'PRS'}, {name: 'Option 1', value: 1},
{name: 'Rome', code: 'RM'} {name: 'Option 2', value: 2},
{name: 'Option 3', value: 3}
], ],
cars: [ justifyOptions: [
{brand: 'Audi', key: 'A'}, {icon: 'pi pi-align-left', value: 'left'},
{brand: 'BMW', key: 'B'}, {icon: 'pi pi-align-right', value: 'Right'},
{brand: 'Mercedes', key: 'M'} {icon: 'pi pi-align-center', value: 'Center'},
] {icon: 'pi pi-align-justify', value: 'Justify'}]
} }
}, },
created() {
this.selectedCar = this.cars[1];
},
components: { components: {
'SelectButtonDoc': SelectButtonDoc 'SelectButtonDoc': SelectButtonDoc
} }
} }
</script> </script>
<style lang="scss" scoped>
/deep/ .car-option {
display: flex;
align-items: center;
justify-content: center;
img {
width: 24px;
margin-right: .5rem;
}
}
</style>

69
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -160,61 +160,40 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Single&lt;/h3&gt; &lt;h5&gt;Single Selection&lt;/h5&gt;
&lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt; &lt;SelectButton v-model="value1" :options="options" /&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{selectedCity}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h5&gt;Multiple Selection&lt;/h5&gt;
&lt;SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" /&gt; &lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt;
&lt;p&gt;Selected Cars: &lt;span style="font-weight: bold"&gt;{{selectedCars}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Custom Content&lt;/h3&gt; &lt;h5&gt;Custom Content&lt;/h5&gt;
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt; &lt;SelectButton v-model="value3" :options="justifyOptions"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="car-option"&gt; &lt;i :class="slotProps.option.icon"&gt;&lt;/i&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/SelectButton&gt; &lt;/SelectButton&gt;
&lt;p&gt;Selected Car: &lt;span style="font-weight: bold"&gt;{{selectedCar}}&lt;/span&gt;&lt;/p&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
export default { export default {
data() { data() {
return { return {
selectedCity: null, value1: 'Off',
selectedCar: null, value2: null,
selectedCars: null, value3: null,
cities: [ options: ['Off', 'On'],
{name: 'London', code: 'LND'}, paymentOptions: [
{name: 'Paris', code: 'PRS'}, {name: 'Option 1', value: 1},
{name: 'Rome', code: 'RM'} {name: 'Option 2', value: 2},
], {name: 'Option 3', value: 3}
cars: [ ],
{brand: 'Audi', key: 'A'}, justifyOptions: [
{brand: 'BMW', key: 'B'}, {icon: 'pi pi-align-left', value: 'left'},
{brand: 'Mercedes', key: 'M'} {icon: 'pi pi-align-right', value: 'Right'},
] {icon: 'pi pi-align-center', value: 'Center'},
} {icon: 'pi pi-align-justify', value: 'Justify'}]
}, }
created() {
this.selectedCar = this.cars[1];
}
}
</CodeHighlight>
<CodeHighlight lang="css">
/deep/ .car-option {
display: flex;
align-items: center;
justify-content: center;
img {
width: 24px;
margin-right: .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>