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

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

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