KRDS Vue

화면 크기 조정 Resize ​

화면 크기 조정은 텍스트를 포함하여 화면에 표시되는 정보를 확대하거나 축소하는 데 사용되는 요소이다. 사용자에 따라 읽을 수 있는 텍스트의 크기, 조작할 수 있는 요소의 크기는 다르다. 디바이스나 사용자 에이전트가 지원하는 여러 가지 설정 기능을 활용하면 사용자가 선호하는 방식으로 콘텐츠의 표시 방식을 수정할 수 있다. 그러나 화면 크기 조정 기능을 필요로 하는 사용자는 관련 기능을 찾아 설정하는 데 어려움을 겪을 가능성이 높으므로 서비스 자체적으로 화면 크기 조정 기능을 제공하고 접근하기 쉽게 만드는 것이 중요하다.

KRDS 가이드

기본 ​

크기를 고르면 document.body.style.zoom을 0.9~1.5배로 바꿔 화면 전체를 확대·축소하므로 예제를 별도 화면(iframe)에 띄웁니다. 초기화 버튼은 보통(1배)으로 되돌립니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { KrdsResize } from '@krds.ui/vue'
</script>

<template>
  <div style="height: 400px; padding: 20px">
    <KrdsResize />
  </div>
</template>

v-model ​

v-model로 고른 크기(sm 작게 · md 보통 · lg 조금 크게 · xlg 크게 · xxlg 가장 크게)를 주고받습니다. 처음 값을 주면 그 크기로 시작하고, 고른 값을 저장해 두었다가 다음 방문 때 다시 넘기면 사용자가 고른 크기를 유지할 수 있습니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsResize } from '@krds.ui/vue'
  import type { KrdsResizeScale } from '@krds.ui/vue'

  // '조금 크게'로 시작한다. 고른 값을 저장해 두었다가 다음 방문 때 넘기면 사용자가 고른 크기를 유지할 수 있다
  const size = ref<KrdsResizeScale>('lg')
</script>

<template>
  <div style="height: 400px; padding: 20px">
    <KrdsResize v-model="size" />
    <p>선택한 크기: {{ size }}</p>
  </div>
</template>

KrdsResize ​

Props

이름타입기본값설명
modelValueKrdsResizeScale-선택한 화면 크기 (v-model). 지정하면 그 크기로 화면을 확대·축소한다

Events

이름인자설명
close[]크기 목록이 닫힐 때
update:modelValue[value: KrdsResizeScale]화면 크기를 골랐을 때 (v-model)