언어 변경 Language switcher

언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다. 한국어가 익숙하지 않은 사용자가 콘텐츠 표시 언어를 변경할 수 있는 수단을 발견하지 못한다면 서비스를 이용할 수 없게 되므로, 디지털 정부서비스로 직관적이고 일관된 방식으로 언어 변경을 제공하는 것이 매우 중요하다.

KRDS 가이드

기본

선택한 언어 코드가 v-model에 담깁니다. prev-item 슬롯으로 목록 위에 현재 언어를 표시할 수 있습니다.

선택된 언어:

vue

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

  const languages = [
    { code: 'ko', name: '한국어' },
    { code: 'en', name: 'English (영어)' },
    { code: 'zh', name: '中文 (중국어)' },
    { code: 'ja', name: '日本語 (일본어)' },
    { code: 'fr', name: 'français (프랑스어)' }
  ]

  const selectedLanguage = ref('')
  const currentLanguageName = computed(() => languages.find(lang => lang.code === selectedLanguage.value)?.name || '선택해주세요')
</script>

<template>
  <div style="height: 400px; padding: 50px">
    <KrdsLanguageSwitcher v-model="selectedLanguage" :language-list="languages">
      언어변경
      <template #prev-item>
        <p class="current-laguage">
          <span>현재 언어</span>
          <strong>{{ currentLanguageName }}</strong>
        </p>
      </template>
    </KrdsLanguageSwitcher>
    <p style="margin-top: 20px">선택된 언어: {{ selectedLanguage }}</p>
  </div>
</template>

외부 페이지 이동

type="external"이면 각 언어가 url로 새 창에서 이동하는 링크가 됩니다.

vue

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

  const languages = [
    { code: 'ko', name: '한국어', url: 'https://example.com/ko' },
    { code: 'en', name: 'English (영어)', url: 'https://example.com/en' },
    { code: 'zh', name: '中文 (중국어)', url: 'https://example.com/zh' },
    { code: 'ja', name: '日本語 (일본어)', url: 'https://example.com/ja' },
    { code: 'fr', name: 'français (프랑스어)', url: 'https://example.com/fr' }
  ]

  const selectedLanguage = ref('')
</script>

<template>
  <div style="height: 400px; padding: 50px">
    <KrdsLanguageSwitcher v-model="selectedLanguage" :language-list="languages" type="external"> 언어변경 </KrdsLanguageSwitcher>
  </div>
</template>

KrdsLanguageSwitcher

Props

이름	타입	기본값	설명
`type`	`"default" \| "external"`	`'default'`	동작 타입 (default: 언어 선택, external: 외부 페이지 이동)
`modelValue`	`string`	`''`	선택된 언어 코드 (v-model)
`dropPosition`	`DropdownPosition`	`'center'`	드롭다운 정렬 위치
`languageList` (필수)	`LanguageData[]`	-	언어 목록

Events

이름	인자	설명
`close`	`[]`	언어 목록이 닫힐 때
`update:modelValue`	`[value: string]`	언어를 골랐을 때 (언어 코드, v-model)

Slots

이름	설명
`default`	언어 버튼 문구 (예: Language)
`prev-item`	언어 목록 위에 넣을 내용

언어 변경 Language switcher ​

기본 ​

외부 페이지 이동 ​

KrdsLanguageSwitcher ​