renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: refactor button attribute implementation

Browse Source 
* refactor: refactor button usage attribute on page utilizing the button
* feat: add more animation effects for `BackToTopAndRefreshButton`
This commit is contained in:
Hakadao
2023-10-12 12:08:39 +08:00
parent f6e0efebce
commit 7c231cfa10
4 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/BackToTopAndRefreshButtons.vue
View File

@@ -7,23 +7,26 @@ const emit = defineEmits(['refresh', 'back-to-top'])
<div
pos="fixed right-24 bottom-4" z-4
>
<!-- refresh button -->
<Button
v-if="showRefreshButton"
size="small"
frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px
@click="emit('refresh')"
frosted-glass
center
style="
--b-button-width: 45px;
--b-button-height: 45px;
--b-button-border-width: 1px;
--b-button-color: var(--bew-elevated-1);
--b-button-color-hover: var(--bew-elevated-2);
--b-button-shadow: var(--bew-shadow-1);
--b-button-shadow-hover: var(--bew-shadow-2);
--b-button-shadow-active: var(--bew-shadow-1);
"
@click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
>
<tabler:refresh text-lg shrink-0 />
</Button>
<!-- back to top button -->
<Button
v-else
size="small"
frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px mt-2
@click="emit('back-to-top')"
>
<tabler:arrow-big-up text-lg shrink-0 />
<Transition name="fade">
<line-md:rotate-270 v-if="showRefreshButton" text-lg shrink-0 rotate-90 absolute />
<line-md:arrow-small-up v-else text-lg shrink-0 absolute />
</Transition>
</Button>
</div>
</template>