Toast

토스트는 사용자에게 작업 결과나 시스템 상태에 대한 간결한 메시지를 사용자의 흐름을 방해하지 않는 선에서 빠르게 전달하는 컴포넌트입니다. 여러 개의 토스트 메시지는 겹치지 않고 화면에 스택 형태로 표시되며, 자동으로 사라지거나, 사용자의 직접 조작으로 닫을 수 있습니다.

Basic

vue

<template>
    <btn
        type="outlined"
        text="Click Default"
        @click="() => (isVisible1 = true)"
    />
    <btn
        type="outlined"
        text="Click MultiLine"
        @click="() => (isVisible2 = true)"
    />
    <btn
        type="outlined"
        text="Click Title"
        @click="() => (isVisible3 = true)"
    />

    <toast-wrapper>
        <toast v-if="isVisible1" @close="isVisible1 = false" :life-time="3000">
            새로운 폴더를 생성했습니다
        </toast>
        <toast v-if="isVisible2" @close="isVisible2 = false" :life-time="3000">
            토스트는 사용자에게 작업 결과나 시스템 상태에 대한 간결한 메시지를
            사용자의 흐름을 방해하지 않는 선에서 빠르게 전달하는 컴포넌트입니다
        </toast>
        <toast v-if="isVisible3" @close="isVisible3 = false" :life-time="3000">
            <template #title> 라이선스 키 만료 </template>
            <template #default>
                현재 라이선스 키가 만료되어 이용할 수 없습니다. 관리자에게
                문의하세요
            </template>
        </toast>
    </toast-wrapper>
</template>

<script setup>
import { Toast, ToastWrapper, Btn } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const isVisible1 = ref(false);
const isVisible2 = ref(false);
const isVisible3 = ref(false);
</script>

Type

상태값을 아이콘으로 표시할 수 있습니다

vue

<template>
    <btn
        type="outlined"
        text="Click Success"
        @click="() => (isVisible4 = true)"
    />
    <btn
        type="outlined"
        text="Click Warning"
        @click="() => (isVisible5 = true)"
    />
    <btn
        type="outlined"
        text="Click Error"
        @click="() => (isVisible6 = true)"
    />
    <toast-wrapper>
        <toast
            v-if="isVisible4"
            @close="isVisible4 = false"
            :life-time="3000"
            type="success"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast
            v-if="isVisible5"
            @close="isVisible5 = false"
            :life-time="3000"
            type="warning"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast
            v-if="isVisible6"
            @close="isVisible6 = false"
            :life-time="3000"
            type="error"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
</template>

<script setup>
import { Toast, ToastWrapper, Btn } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const isVisible4 = ref(false);
const isVisible5 = ref(false);
const isVisible6 = ref(false);
</script>

다양한 위치의 토스트

vue

<template>
    <btn
        type="outlined"
        text="Top Right"
        @click="() => (isVisibleTopRight = true)"
    />
    <btn
        type="outlined"
        text="Top Left"
        @click="() => (isVisibleTopLeft = true)"
    />
    <btn
        type="outlined"
        text="Bottom Right"
        @click="() => (isVisibleBottomRight = true)"
    />
    <btn
        type="outlined"
        text="Bottom Left"
        @click="() => (isVisibleBottomLeft = true)"
    />
    <toast-wrapper>
        <toast
            v-if="isVisibleTopRight"
            @close="isVisibleTopRight = false"
            :life-time="2000"
            position="top-right"
        >
            Top Right 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleTopLeft"
            @close="isVisibleTopLeft = false"
            :life-time="2000"
            position="top-left"
        >
            Top Left 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleBottomRight"
            @close="isVisibleBottomRight = false"
            :life-time="2000"
            position="bottom-right"
        >
            Bottom Right 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleBottomLeft"
            @close="isVisibleBottomLeft = false"
            :life-time="2000"
            position="bottom-left"
        >
            Bottom Left 위치의 토스트입니다.
        </toast>
    </toast-wrapper>
</template>

<script setup>
import { Toast, ToastWrapper, Btn } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const isVisibleTopRight = ref(false);
const isVisibleTopLeft = ref(false);
const isVisibleBottomRight = ref(false);
const isVisibleBottomLeft = ref(false);
</script>

Custom Element

vue

<template>
    <div>
        <btn
            type="outlined"
            text="Click"
            @click="() => (isVisibleCustomElement = true)"
        />
        <toast-wrapper>
            <toast
                v-if="isVisibleCustomElement"
                @close="isVisibleCustomElement = false"
                :life-time="3000"
                :show-close-btn="false"
            >
                <template #title> 업데이트가 준비되었습니다</template>
                <template #default>
                    <div class="flex flex-col gap-4">
                        <p>
                            이번 업데이트에서는 새로운 사용자 정의 대시보드
                            기능이 추가되어, 원하는 형태로 대시보드를 구성하고
                            저장할 수 있게 되었습니다
                        </p>
                        <div class="flex gap-2">
                            <btn type="outlined" text="다음에" />
                            <btn type="primary-filled" text="업데이트" />
                        </div>
                    </div>
                </template>
            </toast>
        </toast-wrapper>
    </div>
</template>

<script setup>
import { Toast, ToastWrapper, Btn } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const isVisibleCustomElement = ref(false);
</script>

API

이름	타입	기본값	설명
type	'default' \| 'success' \| 'warning' \| 'error'	'default'	토스트의 상태(아이콘/색상)
position	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'	'bottom-right'	토스트가 표시될 화면 위치
lifeTime	number	0	자동으로 닫히는 시간(ms). 0이면 자동으로 닫히지 않음
showCloseBtn	boolean	true	닫기(×) 버튼 표시 여부

슬롯

#title: 토스트 상단에 제목을 표시할 때 사용합니다.
기본 슬롯: 토스트의 본문 메시지를 표시합니다.

이벤트

@close: 토스트가 닫힐 때 발생합니다.

상세 설명

type: 토스트의 상태에 따라 아이콘과 색상이 달라집니다.
'success'는 성공, 'warning'은 경고, 'error'는 오류, 'default'는 일반 메시지에 사용합니다.
position: 여러 개의 토스트가 동시에 표시될 때, 화면의 어느 위치에 쌓일지 결정합니다.
lifeTime: 지정한 시간(ms) 후 자동으로 토스트가 사라집니다. 0이면 자동으로 닫히지 않고, 사용자가 직접 닫아야 합니다.
showCloseBtn: 닫기 버튼(×)의 표시 여부를 제어합니다.
슬롯:
- #title 슬롯을 사용하면 제목을 강조할 수 있습니다.
- 기본 슬롯에는 메시지 본문을 작성합니다.
@close 이벤트: 토스트가 닫힐 때 실행할 동작을 지정할 수 있습니다.

Toast ​

Basic ​

Type ​

다양한 위치의 토스트 ​

Custom Element ​

API ​

슬롯 ​

이벤트 ​

상세 설명 ​

Toast

Basic

Type

다양한 위치의 토스트

Custom Element

API

슬롯

이벤트

상세 설명