Интернационализация

Интернационализация (i18n) в Carbon Components Svelte обеспечивает поддержку разных языков и локалей, позволяя создавать приложения, адаптированные под пользователей из разных регионов. Библиотека предоставляет встроенные механизмы для локализации компонентов интерфейса, таких как кнопки, поля ввода, модальные окна, уведомления и другие элементы.

Основные концепции

  1. Локализуемые строки Все текстовые элементы компонентов можно заменять на значения из словарей локализации. Каждая локаль представлена объектом с ключами и соответствующими переводами:

    const translations = {
    en: {
        save: "Save",
        cancel: "Cancel",
        search: "Search"
    },
    ru: {
        save: "Сохранить",
        cancel: "Отмена",
        search: "Поиск"
    }
};

    Компоненты используют эти ключи для отображения текста, что позволяет менять язык без модификации структуры интерфейса.

  2. Контекст локали Carbon Components Svelte использует механизм контекста Svelte для передачи текущей локали компонентам. Установка локали осуществляется через setContext, а чтение локали — через getContext.

    import { setContext } from 'svelte';

const currentLocale = 'ru';
setContext('locale', currentLocale);

    Внутри компонентов можно получать текущую локаль и автоматически выбирать нужные строки из словаря.

  3. Динамическая смена языка Благодаря реактивной природе Svelte, смена локали может происходить динамически. Достаточно обновить значение контекста или реактивной переменной:

    import { writable } from 'svelte/store';

export const locale = writable('en');

// Переключение языка
locale.set('ru');

    Компоненты, использующие эту переменную, автоматически обновят отображаемые тексты.

Локализация компонентов

Кнопки и элементы управления Большинство компонентов Carbon поддерживают свойства для локализации через i18n объект. Например, компонент Button можно настроить так:

Формы и поля ввода Компоненты форм, такие как TextInput или Select, поддерживают локализованные метки, подсказки и сообщения об ошибках:

Модальные окна и уведомления Модальные диалоги и уведомления используют объекты локализации для кнопок действия и текста сообщений:

Управление форматами даты и числа

Carbon Components Svelte не ограничивается только переводом текстов. Интернационализация включает работу с локализованными форматами даты и числа:

const date = new Date();

const formattedDate = new Intl.DateTimeFormat('ru-RU', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
}).format(date);

Для чисел:

const price = 123456.78;
const formattedPrice = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
}).format(price);

Использование встроенных объектов Intl позволяет автоматически адаптировать приложение под выбранную локаль без изменения компонентов.

Практика интеграции i18n

  1. Создание объекта переводов для каждой локали.
  2. Настройка глобального контекста для текущей локали.
  3. Использование ключей локализации во всех компонентах.
  4. Реактивное обновление интерфейса при смене языка.
  5. Форматирование дат, чисел и валют через Intl.

Такой подход гарантирует, что приложение будет полностью готово к работе с множеством языков и региональных особенностей без дублирования кода и с сохранением единого интерфейса.

Оглавление