31 lines
1.9 KiB
Vue
31 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Tab Page -->
|
|
<h4 :class="headingClass">Tab Seite</h4>
|
|
<div :class="rowClass"><label :class="labelClass">Titel</label><input :class="inputClass" type="text" v-model="widget.text"></div>
|
|
|
|
<!-- Style -->
|
|
<h4 :class="headingClass">Stil</h4>
|
|
<div :class="rowClass"><label :class="labelClass">Textfarbe</label><input :class="colorInputClass" type="color" v-model="widget.textColor"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Hintergrund</label><input :class="colorInputClass" type="color" v-model="widget.bgColor"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.bgOpacity"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Radius</label><input :class="inputClass" type="number" v-model.number="widget.radius"></div>
|
|
|
|
<!-- Shadow -->
|
|
<h4 :class="headingClass">Schatten</h4>
|
|
<div :class="rowClass"><label :class="labelClass">Aktiv</label><input class="accent-[var(--accent)]" type="checkbox" v-model="widget.shadow.enabled"></div>
|
|
<div :class="rowClass"><label :class="labelClass">X</label><input :class="inputClass" type="number" v-model.number="widget.shadow.x"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Y</label><input :class="inputClass" type="number" v-model.number="widget.shadow.y"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Blur</label><input :class="inputClass" type="number" v-model.number="widget.shadow.blur"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.shadow.color"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { rowClass, labelClass, inputClass, headingClass, colorInputClass } from '../shared/styles';
|
|
|
|
defineProps({
|
|
widget: { type: Object, required: true }
|
|
});
|
|
</script>
|