feat: สร้างปุ่ม trigger
This commit is contained in:
parent
c41367bda4
commit
71f73899cc
1 changed files with 39 additions and 0 deletions
39
src/components/01_branch-management/BtnAddComponet.vue
Normal file
39
src/components/01_branch-management/BtnAddComponet.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
label?: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="column items-center box" :class="{ dark: $q.dark.isActive }">
|
||||
<div class="row">
|
||||
<q-btn
|
||||
@click="$emit('trigger')"
|
||||
size="lg"
|
||||
class="color-btn"
|
||||
icon="mdi-plus"
|
||||
round
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-mt-sm color-text">{{ label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
--_btn-add-color: var(--cyan-6-hsl);
|
||||
|
||||
.color-btn {
|
||||
color: hsl(var(--_btn-add-color));
|
||||
background: hsla(var(--_btn-add-color) / 0.1) !important;
|
||||
}
|
||||
|
||||
.color-text {
|
||||
color: var(--stone-6);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
--_btn-add-color: var(--cyan-5-hsl);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue