aboutsummaryrefslogtreecommitdiff
path: root/src/components/IconButton.vue
diff options
context:
space:
mode:
authorTerry Truong <terry06890@gmail.com>2022-10-07 14:20:59 +1100
committerTerry Truong <terry06890@gmail.com>2022-10-08 20:08:47 +1100
commitf50ff6be403c19ce44632098104a775f4144ea66 (patch)
treeffabe4a47067409e4d63802000d3a0b86ae6c778 /src/components/IconButton.vue
parent1c69c4abf6e54ccab886c23cd6e691179ce6f076 (diff)
Add title bar
Add IconButton.vue and components/*Icon.vue files
Diffstat (limited to 'src/components/IconButton.vue')
-rw-r--r--src/components/IconButton.vue23
1 files changed, 23 insertions, 0 deletions
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
new file mode 100644
index 0000000..9357e97
--- /dev/null
+++ b/src/components/IconButton.vue
@@ -0,0 +1,23 @@
+<template>
+<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
+ :class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
+ <slot class="w-full h-full">?</slot>
+</div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+
+const props = defineProps({
+ size: {type: Number, default: 36},
+ disabled: {type: Boolean, default: false},
+});
+
+const styles = computed(() => ({
+ minWidth: props.size + 'px',
+ maxWidth: props.size + 'px',
+ minHeight: props.size + 'px',
+ maxHeight: props.size + 'px',
+ padding: (props.size / 5) + 'px',
+}));
+</script>