62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<div class="pill-radio">
|
|
<button
|
|
:class="['pill-radio__button', { 'pill-radio__button--active': item === selectedItem }]"
|
|
v-for="item in props.items"
|
|
:key="item"
|
|
@click="updateSelectedItem(item)"
|
|
>
|
|
{{ item }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const emit = defineEmits(['update:selectedItem']);
|
|
|
|
const props = defineProps<{
|
|
items: string[];
|
|
selectedItem: string;
|
|
}>();
|
|
|
|
function updateSelectedItem(item: string) {
|
|
emit('update:selectedItem', item);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.pill-radio {
|
|
display: flex;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
|
|
&__button {
|
|
flex: 1;
|
|
cursor: pointer;
|
|
background-color: $color-silver-light;
|
|
|
|
outline: none;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
border: none;
|
|
|
|
&--active {
|
|
background-color: white;
|
|
border: solid $color-silver 1px;
|
|
}
|
|
}
|
|
|
|
&__button:first-child {
|
|
border-top-left-radius: $round-border-radius;
|
|
border-bottom-left-radius: $round-border-radius;
|
|
}
|
|
|
|
&__button:last-child {
|
|
border-top-right-radius: $round-border-radius;
|
|
border-bottom-right-radius: $round-border-radius;
|
|
}
|
|
}
|
|
</style>
|