KRDS Vue

모달 Modal ​

모달은 대화창의 한 종류로 기본 창에 종속된 요소이다. 기본 창과 겹쳐져 가장 상단에 표시되며, 이때 기본 창은 비활성 상태로 전환되어 상호작용이 불가능하므로 사용자는 모달에서의 단일한 과업 또는 메시지에 집중할 수 있다.

KRDS 모달KRDS 바텀시트

기본 ​

v-model로 열림 상태를 제어합니다. 열리면 모달 안으로 포커스가 이동하고 Tab 키 포커스가 모달 안에서 순환하며, Esc 키나 배경 클릭으로 닫으면 연 버튼으로 포커스가 돌아갑니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const isOpen = ref(false)
</script>

<template>
  <KrdsButton size="large" variant="secondary" @click="isOpen = true">모달 열기</KrdsButton>
  <KrdsModal v-model="isOpen" modal-id="modal_basic">
    <template #title>모달 제목</template>
    <p>대화 상자는 사용자에게 작업에 대해 알리고 중요한 정보를 포함하거나 결정이 필요하거나 여러 작업을 포함할 수 있습니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="tertiary" @click="isOpen = false">아니요</KrdsButton>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">예</KrdsButton>
    </template>
  </KrdsModal>
</template>

사이즈 ​

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const size = ref<'small' | 'large'>('small')
  const isOpen = ref(false)

  const open = (value: 'small' | 'large') => {
    size.value = value
    isOpen.value = true
  }
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 1rem">
    <KrdsButton size="large" variant="secondary" @click="open('small')">Small 모달 열기</KrdsButton>
    <KrdsButton size="large" variant="secondary" @click="open('large')">Large 모달 열기</KrdsButton>
  </div>
  <KrdsModal v-model="isOpen" :size="size" modal-id="modal_sizes">
    <template #title>{{ size === 'small' ? 'Small' : 'Large' }} 모달</template>
    <p>{{ size === 'small' ? '작은' : '큰' }} 크기의 모달입니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">확인</KrdsButton>
    </template>
  </KrdsModal>
</template>

배경 없음 ​

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const isOpen = ref(false)
</script>

<template>
  <KrdsButton size="large" variant="secondary" @click="isOpen = true">배경 없는 모달 열기</KrdsButton>
  <KrdsModal v-model="isOpen" :backdrop="false" modal-id="modal_no_backdrop">
    <template #title>배경 없는 모달</template>
    <p>배경 딤 처리 없이 모달만 표시됩니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">확인</KrdsButton>
    </template>
  </KrdsModal>
</template>

풀팝업 ​

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const isOpen = ref(false)
</script>

<template>
  <KrdsButton size="large" variant="secondary" @click="isOpen = true">풀팝업 열기</KrdsButton>
  <KrdsModal v-model="isOpen" full modal-id="modal_full">
    <template #title>풀팝업</template>
    <p>전체 화면을 차지하는 풀팝업입니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">확인</KrdsButton>
    </template>
  </KrdsModal>
</template>

바텀시트 ​

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const isOpen = ref(false)
</script>

<template>
  <KrdsButton size="large" variant="secondary" @click="isOpen = true">바텀시트 열기</KrdsButton>
  <KrdsModal v-model="isOpen" bottom-sheet modal-id="modal_bottom_sheet">
    <template #title>바텀시트</template>
    <p>하단에서 올라오는 바텀시트입니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">확인</KrdsButton>
    </template>
  </KrdsModal>
</template>

Persistent ​

중요한 결정을 받아야 할 때 배경 클릭과 Esc 키로 닫히지 않게 합니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsModal } from '@krds.ui/vue'

  const isOpen = ref(false)
</script>

<template>
  <KrdsButton size="large" variant="secondary" @click="isOpen = true">Persistent 모달 열기</KrdsButton>
  <KrdsModal v-model="isOpen" persistent modal-id="modal_persistent">
    <template #title>Persistent 모달</template>
    <p>배경을 클릭하거나 Esc 키를 눌러도 닫히지 않습니다. 버튼으로만 닫을 수 있습니다.</p>
    <template #footer>
      <KrdsButton size="medium" variant="primary" @click="isOpen = false">확인</KrdsButton>
    </template>
  </KrdsModal>
</template>

KrdsModal ​

Props

이름타입기본값설명
sizeKrdsModalSize'medium'모달 크기
modelValuebooleanfalse모달 표시 여부 (v-model)
backdropbooleantrue배경 딤(backdrop) 표시 여부
modalIdstring-모달 엘리먼트 ID
fullbooleanfalse전체 화면 모달 여부
bottomSheetbooleanfalse하단 시트형 모달 여부
persistentbooleanfalse배경 클릭·Esc 키로 닫히지 않는 지속형 모달 여부

Events

이름인자설명
update:modelValue[value: boolean]모달이 열리거나 닫힐 때 (v-model)

Slots

이름설명
title
default
footer