JenniferSoft Design Docs

Appearance

ProgressButton ​

Basic ​

vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" />
</template>

Props ​

이름타입기본값설명
type'circle''circle'진행 표시 유형
rationumber0진행 비율 (0 ~ 1 사이)
size'large' | 'medium' | 'small'-컴포넌트 크기
disabledbooleanfalse비활성화 여부

Size ​

vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" size="large" />
    <progress-button ratio="0.46" size="medium" />
    <progress-button ratio="0.46" size="small" />
</template>

Animate (can stop by clicking) ​

vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
import { ref, onUnmounted } from 'vue';
const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});

const stopAnimate = () => {
    clearInterval(intervalId);
};
</script>
<template>
    <progress-button :ratio="animateRatio" @click="stopAnimate" />
</template>