primevue-mirror/pages/colorpicker/index.vue

58 lines
1.5 KiB
Vue
Raw Normal View History

2022-09-09 20:41:18 +00:00
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ColorPicker</h1>
<p>ColorPicker is an input component to select a color.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
<div class="card">
<h5>Wall Color</h5>
<div class="flex flex-column align-items-center md:flex-row md:align-items-start">
<ColorPicker v-model="color3" :inline="true" />
<div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex">
2022-09-10 14:36:01 +00:00
<img alt="room" src="/demo/images/interior.png" class="w-full md:auto" />
2022-09-09 20:41:18 +00:00
</div>
</div>
</div>
</div>
<ColorPickerDoc />
</div>
</template>
<script>
import ColorPickerDoc from './ColorPickerDoc';
export default {
data() {
return {
color1: null,
color2: '1976D2',
color3: '474747'
};
},
computed: {
wallStyle() {
return {
backgroundColor: '#' + this.color3
};
}
},
components: {
ColorPickerDoc: ColorPickerDoc
}
};
</script>