fb821dbf21
- Replaced hardcoded orange color values with the new CSS variable for primary orange in multiple components, ensuring consistency in styling. - Updated styles in DialogWidget, MessageboxWidget, SettingsWidget, SimpleTabs, and various Falukant components to enhance maintainability and readability.
64 lines
1.1 KiB
Vue
64 lines
1.1 KiB
Vue
<template>
|
|
<div class="simple-tabs">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
:class="['simple-tab', { active: internalValue === tab.value }]"
|
|
@click="selectTab(tab.value)"
|
|
>
|
|
<slot name="label" :tab="tab">
|
|
{{ $t(tab.label) }}
|
|
</slot>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SimpleTabs',
|
|
props: {
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
internalValue() {
|
|
return this.modelValue;
|
|
}
|
|
},
|
|
methods: {
|
|
selectTab(value) {
|
|
// 1) v-model aktualisieren
|
|
this.$emit('update:modelValue', value);
|
|
// 2) zusätzliches change-Event
|
|
this.$emit('change', value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.simple-tabs {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.simple-tab {
|
|
padding: 0.5rem 1rem;
|
|
background: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.simple-tab.active {
|
|
background: var(--color-primary-orange);
|
|
color: #000;
|
|
}
|
|
</style>
|