mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="inline-flex toggle-btn-wrapper shadow-md">
|
||
|
|
<button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
|
||
|
|
{{ item.text }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: String,
|
||
|
|
/**
|
||
|
|
* [{ "text", "", "value": "" }]
|
||
|
|
*/
|
||
|
|
items: {
|
||
|
|
type: Array,
|
||
|
|
default: Object
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
methods: {
|
||
|
|
clickBtn(value) {
|
||
|
|
this.$emit('input', value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.toggle-btn-wrapper .toggle-btn:first-child {
|
||
|
|
border-top-left-radius: 0.375rem /* 6px */;
|
||
|
|
border-bottom-left-radius: 0.375rem /* 6px */;
|
||
|
|
}
|
||
|
|
.toggle-btn-wrapper .toggle-btn:last-child {
|
||
|
|
border-top-right-radius: 0.375rem /* 6px */;
|
||
|
|
border-bottom-right-radius: 0.375rem /* 6px */;
|
||
|
|
}
|
||
|
|
.toggle-btn-wrapper .toggle-btn:first-child::before {
|
||
|
|
border-top-left-radius: 0.375rem /* 6px */;
|
||
|
|
border-bottom-left-radius: 0.375rem /* 6px */;
|
||
|
|
}
|
||
|
|
.toggle-btn-wrapper .toggle-btn:last-child::before {
|
||
|
|
border-top-right-radius: 0.375rem /* 6px */;
|
||
|
|
border-bottom-right-radius: 0.375rem /* 6px */;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-btn-wrapper .toggle-btn:not(:first-child) {
|
||
|
|
margin-left: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-btn::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(255, 255, 255, 0);
|
||
|
|
transition: all 0.1s ease-in-out;
|
||
|
|
}
|
||
|
|
.toggle-btn:hover:not(:disabled)::before {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
.toggle-btn:hover:not(:disabled) {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-btn {
|
||
|
|
color: rgba(255, 255, 255, 0.75);
|
||
|
|
}
|
||
|
|
.toggle-btn.selected {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.toggle-btn.selected::before {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
button.toggle-btn:disabled::before {
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
</style>
|