dashboard/components/ClusterBadge.vue

35 lines
614 B
Vue

<script>
export default {
props: {
cluster: {
type: Object,
required: true,
},
},
computed: {
hasBadge() {
return !!this.cluster?.badge;
}
}
};
</script>
<template>
<div v-if="hasBadge" :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }" class="cluster-badge">
{{ cluster.badge.text }}
</div>
</template>
<style lang="scss" scoped>
.cluster-badge {
cursor: default;
border-radius: 10px;
font-size: 12px;
padding: 2px 10px;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
}
</style>