<template>
  <div class="vee-panel-header">
    <div class="vee-panel-header-left">
      <slot name="left">
        <span class="vee-panel-header-text">{{name}}</span>
      </slot>
    </div>
    <div class="vee-panel-header-right">
      <slot name="right">
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="scss">
.vee-panel-header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  padding: 0 10px;
}

.vee-panel-header-setting-icon {
  margin-right: 5px;
}

.vee-panel-header-text {
  display: inline-block;
  min-width: 100px;
}
</style>
