Drawer

Drawer는 화면 측면에서 슬라이드 형태로 등장하는 패널입니다. 주로 설정, 필터 등의 추가 UI 요소를 제공하기 위해 활용되며, 메인 화면의 공간을 효율적으로 사용하면서도 필요한 정보를 사용자에게 전달할 수 있습니다.

Basic

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Btn, ICON_TYPE, Drawer } from '@jennifersoft/vue-components-v2';

const showLeftDrawer = ref(false);
const showRightDrawer = ref(false);

const showLeft = () => {
    showLeftDrawer.value = true;
};

const hideLeft = () => {
    showLeftDrawer.value = false;
};

const showRight = () => {
    showRightDrawer.value = true;
};

const hideRight = () => {
    showRightDrawer.value = false;
};
</script>
<template>
    <btn
        type="outlined"
        :leading-icon="ICON_TYPE.arrowLeft"
        @click="showLeft"
    />
    <btn
        type="outlined"
        :leading-icon="ICON_TYPE.arrowRight"
        @click="showRight"
    />

    <drawer v-model:isOpen="showLeftDrawer" @close="hideLeft" direction="left">
        왼쪽 Drawer
    </drawer>
    <drawer
        v-model:isOpen="showRightDrawer"
        @close="hideRight"
        direction="right"
    >
        오른쪽 Drawer
    </drawer>
</template>