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

SelectButton demo update

pull/310/head
cagataycivici 2020-04-30 21:37:59 +03:00
parent 7016969524
commit ebf550f535
2 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,9 @@
<h3>Custom Content</h3>
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps">
<div style="text-align: center; padding: 1em; width: 125px">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
<div class="car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>
@ -61,3 +61,16 @@ export default {
}
}
</script>
<style lang="scss" scoped>
/deep/ .car-option {
display: flex;
align-items: center;
justify-content: center;
img {
width: 24px;
margin-right: .5em;
}
}
</style>

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

@ -40,10 +40,10 @@ export default {
<template v-pre>
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&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;/template&gt;
&lt;/SelectButton&gt;
</template>
@ -171,9 +171,9 @@ export default {
&lt;h3&gt;Custom Content&lt;/h3&gt;
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&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;/template&gt;
&lt;/SelectButton&gt;
@ -204,6 +204,19 @@ export default {
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: .5em;
}
}
</CodeHighlight>
</TabPanel>
</TabView>