cip-components/cip-form-design/widgets/form-property/config-tab.vue

<template>
  <div class="config-tab" :class="{'config-tab--active':isActive}" @click="emitClick">
    <slot></slot>
  </div>
</template>
<script>

export default {
  props: {
    name: String,
    isActive: Boolean
  },
  emits: ['onClick'],
  setup (props, { emit }) {
    const emitClick = () => {
      emit('onClick', props.name)
    }
    return {
      emitClick
    }
  }
}
</script>
<style lang="less">
.config-tab{
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 2px solid transparent;
  &.config-tab--active{
    //background: @primary;
    //color: #fff;
    border-bottom-color:  @primary;
  }
  //&:hover{
  //  background: @primary;
  //  color: #fff;
  //}
  &+&{
    //border-left: 1px solid #ddd;
  }
}
</style>