<template>
  <div class="row">
        <div class="col border-style-header">
            <div class="table-borderless">
                <table class="table table-bordered table-sm border-style-header">
                    <tbody>
                        <tr>
                            <td class="icon-header-td"><i class="icon-theme fa" :class="[icoHeader]" id="ico_Header"></i></td>
                            <td class="text-header-td">
                                <h3 class="text-dark mb-0 text-header-h3" id="txt_Header">{{textHeader}}</h3>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default{
    name:'HeaderForm',
    props:{
        icoHeader: { type: String, default: 'fa-plus-square' },
        textHeader: { type: String, default: 'Add' }
    }
}
</script>
<style scoped>
.icon-header-td{
    vertical-align: middle;
    text-align: center;
    display:visible;
}

.text-header-td{
    width: 100%;
    vertical-align: top;
    padding-top: 0px;
}

.text-header-h3{
    margin-top: 4px;
}

.border-style-header{
    border-style: none;
}
</style>
