48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<!-- The filled version of the button has a solid background -->
|
|
<template>
|
|
<button
|
|
class="button-filled-component w-[80px] h-[32px] rounded-full flex text-[#FFFFFF] justify-center items-center bg-[#0099FF] hover:text-[#FFFFFF] hover:bg-[#0080D5] cursor-pointer"
|
|
:class="{
|
|
ring: isPressed,
|
|
'ring-[#0099FF]': isPressed,
|
|
'ring-opacity-30': isPressed,
|
|
'bg-[#0099FF]': isPressed,
|
|
}"
|
|
@mousedown="onMousedown"
|
|
@mouseup="onMouseup"
|
|
>
|
|
{{ buttonText }}
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/ButtonFilled Filled button component with
|
|
* solid background and press-state ring effect.
|
|
*/
|
|
|
|
import { ref } from "vue";
|
|
|
|
defineProps({
|
|
buttonText: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const isPressed = ref(false);
|
|
|
|
const onMousedown = () => {
|
|
isPressed.value = true;
|
|
};
|
|
|
|
const onMouseup = () => {
|
|
isPressed.value = false;
|
|
};
|
|
</script>
|