<template>
	<div class="efly-tip" :class="{
	     'tip-primary': type === 'primary' || (type === 'checkbox' && active),
	     'tip-danger': type === 'danger' || (type === 'checkbox' && !active),
	     'tip-success': type === 'success',
	     'tip-warning': type === 'warning',
	     'tip-info': type === 'info',
	}" :style="'width:'+ width">
		<div class="efly-tip-content">
			<i class="icon" :class="icon" v-if="icon"></i>
			<slot></slot>
		</div>
		<div>
			<efly-checkbox class="box" :active="active" v-if="type === 'checkbox'" @click="checkboxSelect">{{label}}</efly-checkbox>
		</div>
	</div>
</template>

<script>
    import EflyTip from "./tip";

    export default EflyTip;
</script>

<style lang="scss" scoped>
</style>
