Drawer 드로어

화면 가장자리에서 미끄러지듯 나오는 플로팅 패널 컴포넌트예요.

출처: 문서

본문

화면 가장자리에서 슬라이드로 나타나는 플로팅 패널 컴포넌트예요.

언제 사용하나요?

1. 드로어가 부모 창 가장자리에서 슬라이드 인해 부모 창 내용의 일부를 덮어요. 사용자는 드로어 안에서 작업하더라도 현재 작업을 떠날 필요가 없고, 작업이 끝나면 부드럽게 원래 작업으로 돌아올 수 있어요.
2. 부모 창의 내용을 제어할 추가 패널이 필요하고, 이 패널을 필요할 때 불러내고 싶을 때 사용해요. 예를 들어 화면 표시 스타일을 바꾸거나 화면에 내용을 추가하는 경우예요.
3. 현재 작업 흐름 속에 임시 작업을 끼워 넣거나, 추가 내용을 만들거나 미리 보고 싶을 때 사용해요. 예를 들어 약관을 보여 주거나 하위 객체를 만드는 경우예요.

기본 사용법

:::demo 기본적으로 오른쪽에서 슬라이드 아웃하며 너비는 300px이에요.

<template>
  <d-button variant="solid" color="primary" @click="showDrawer">Click Me</d-button>
  <d-drawer v-model="visible" style="padding: 20px;">Hello Drawer</d-drawer>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const showDrawer = () => (visible.value = true);

    return { visible, showDrawer };
  },
});
</script>

:::

왼쪽에서 나오기

:::demo position으로 왼쪽에서 슬라이드 아웃하게 설정해요.

<template>
  <d-button variant="solid" color="primary" @click="showDrawer">Click Me</d-button>
  <d-drawer v-model="visible" position="left" style="padding: 20px;">Left Drawer</d-drawer>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const showDrawer = () => (visible.value = true);

    return { visible, showDrawer };
  },
});
</script>

:::

배경 스크롤

:::demo drawer가 슬라이드 아웃된 뒤에는 기본적으로 배경 스크롤이 잠기는데, lock-scroll을 false로 설정하면 잠금을 풀 수 있어요.

<template>
  <d-button variant="solid" color="primary" @click="showDrawer">Click Me</d-button>
  <d-drawer v-model="visible" :lock-scroll="false" style="padding: 20px;">Background can be scrolled</d-drawer>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props, ctx) {
    const visible = ref(false);
    const showDrawer = () => (visible.value = true);

    return { visible, showDrawer };
  },
});
</script>

:::

닫기 전 콜백

:::demo before-close는 사용자가 drawer를 닫을 때 호출돼요. 비동기 작업을 마친 뒤 done 함수를 실행해 닫을 수 있어요.

<template>
  <d-button variant="solid" color="primary" @click="showDrawer">Click Me</d-button>
  <d-drawer v-model="visible" :before-close="onBeforeClose" style="padding: 20px;">Delay Close</d-drawer>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const showDrawer = () => (visible.value = true);
    const onBeforeClose = (done) => {
      new Promise((resolve) => {
        setTimeout(resolve, 1000);
      }).then(done);
    };

    return { visible, showDrawer, onBeforeClose };
  },
});
</script>

:::

서비스 방식

:::demo 컴포넌트는 전역에 $drawerService를 등록해 두었기 때문에 서비스 방식으로도 사용할 수 있어요. drawer의 내용은 content 파라미터로 넘겨요. 서비스는 drawer를 닫는 데 쓰는 close 메서드를 반환해요.

<template>
  <d-button variant="solid" color="primary" @click.native="showDrawer()">서비스 방식</d-button>
</template>

<script>
import { defineComponent, h } from 'vue';

export default defineComponent({
  setup() {
    function showDrawer() {
      this.$drawerService.open({
        content: () => h('div', { style: { padding: '20px' } }, [h('span', {}, ['Open drawer board in service mode'])]),
      });
    }

    return { showDrawer };
  },
});
</script>

:::

Drawer 파라미터

Drawer 이벤트

Drawer 슬롯

더 알아보기 (Learn more)

d-drawer는 화면 가장자리에서 나오는 보조 패널로, 설정 화면이나 약관 미리 보기처럼 현재 작업을 벗어나지 않고 부가 작업을 처리할 때 좋아요. before-close를 쓰면 저장 같은 비동기 처리가 끝난 뒤에 닫히도록 흐름을 제어할 수 있어요.