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;
img.flag {
width: 28px;
width: 18px;
margin-right: .5rem;
}
}

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

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

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

@ -160,61 +160,40 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Single&lt;/h3&gt;
&lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{selectedCity}}&lt;/span&gt;&lt;/p&gt;
&lt;h5&gt;Single Selection&lt;/h5&gt;
&lt;SelectButton v-model="value1" :options="options" /&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" /&gt;
&lt;p&gt;Selected Cars: &lt;span style="font-weight: bold"&gt;{{selectedCars}}&lt;/span&gt;&lt;/p&gt;
&lt;h5&gt;Multiple Selection&lt;/h5&gt;
&lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt;
&lt;h3&gt;Custom Content&lt;/h3&gt;
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;h5&gt;Custom Content&lt;/h5&gt;
&lt;SelectButton v-model="value3" :options="justifyOptions"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="car-option"&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;i :class="slotProps.option.icon"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;/SelectButton&gt;
&lt;p&gt;Selected Car: &lt;span style="font-weight: bold"&gt;{{selectedCar}}&lt;/span&gt;&lt;/p&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
selectedCity: null,
selectedCar: null,
selectedCars: null,
cities: [
{name: 'London', code: 'LND'},
{name: 'Paris', code: 'PRS'},
{name: 'Rome', code: 'RM'}
],
cars: [
{brand: 'Audi', key: 'A'},
{brand: 'BMW', key: 'B'},
{brand: 'Mercedes', key: 'M'}
]
}
},
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;
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'}]
}
}
}
</CodeHighlight>