화면 크기 조정

화면 크기 조정은 텍스트를 포함하여 화면에 표시되는 정보를 확대하거나 축소하는 데 사용되는 요소이다.

화면 크기 조정은 텍스트를 포함하여 화면에 표시되는 정보를 확대하거나 축소하는 데 사용되는 요소이다.

사용 지침

고령층·시력 약자를 고려해 헤더 유틸리티 영역에 노출하고, 선택 값을 저장해 다음 방문에도 동일한 크기로 유지되도록 합니다.

예제

기본

examples/resize/ResizeDefault.tsx
"use client"

import { Resize } from "@/components/ui/dynamic/resize"

제어 상태

현재 선택된 크기: md

examples/resize/ResizeControlled.tsx
"use client"

import * as React from "react"

커스텀 라벨

examples/resize/ResizeCustomLabels.tsx
import { Resize } from "@/components/ui/dynamic/resize"

export default function ResizeCustomLabels() {

속성

이름타입기본값설명
buttonTextstring화면크기
classNamestring
defaultValueenummd
labelsPartial<Record<ResizeScale, string>>
onChange((scale: ResizeScale) => void)
resetTextstring초기화
valueenum