언어 변경

언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다.

언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다.

사용 지침

다국어를 지원하는 누리집의 헤더 우측 유틸리티 영역에 배치하고, 현재 선택된 언어를 강조하면서 lang 속성을 함께 갱신해 스크린 리더가 언어 전환을 정확히 인식하도록 합니다.

예제

Default

examples/language-switcher/LanguageSwitcherDefault.tsx
"use client"

import { LanguageSwitcher } from "@/components/ui/dynamic/language-switcher"

Simple

examples/language-switcher/LanguageSwitcherSimple.tsx
"use client"

import { LanguageSwitcher } from "@/components/ui/dynamic/language-switcher"

Controlled

examples/language-switcher/LanguageSwitcherControlled.tsx
"use client"

import * as React from "react"

속성

이름타입기본값설명
aria-labelstringDefines a string value that labels the current element. @see aria-labelledby.
classNamestring
closeOnClickOutsideboolean
defaultOpenboolean
defaultValuestring
idstring
onChange((value: string, option: LanguageOption) => void)
onClickMouseEventHandler<HTMLDivElement>
onOpenChange((open: boolean) => void)
openboolean
optionsLanguageOption[]
styleCSSProperties
tabIndexnumber
valuestring