i18n

thl-ui có sẵn bộ i18n nhỏ gọn, không phụ thuộc thư viện, kèm bản dịch English (en), Tiếng Việt (vi), 日本語 (ja), 简体中文 (zh) cho mọi chuỗi có sẵn (phân trang, bảng, date picker, validation, upload, layout, menu, trang mẫu…).

Thử: đổi ngôn ngữ

Dịch

VueReactAngular

vue

const { t, n, d, setLocale } = useI18n();
t('pagination.total', { count: 3 });   // trong template: $t('common.save')

tsx

const t = useT();
t('pagination.total', { count: 3 }); t.n(1234.5); t.d(new Date());

html

<span>{{ 'pagination.total' | thlT: { count: 3 } }}</span>

Tham số & số nhiều

pagination: {
  showing: 'Hiển thị {from} đến {to} trong {total} mục',
  total: { other: '{count} mục' },
}

Số nhiều dùng các nhóm của Intl.PluralRules (zero tuỳ chọn, dùng khi count === 0); count được định dạng theo ngôn ngữ (1.200 mục).

Thêm / ghi đè bản dịch

createThl({
  locale: 'vi',
  messages: {
    vi: { common: { save: 'Lưu lại' }, app: { welcome: 'Xin chào, {name}!' } },
    en: { app: { welcome: 'Welcome, {name}!' } },
  },
});
thl.i18n.mergeMessages('vi', { app: { bye: 'Tạm biệt' } }); // lúc chạy

Thêm ngôn ngữ mới (tải lười)

createThl({
  locales: ['en', 'ja', 'vi', 'zh', 'ko'],
  loadLocale: (l) => import(`./locales/${l}.ts`),
});

Sao chép @thl-ui/locales/src/en.ts làm mẫu; khai báo kiểu ThlMessages để TypeScript báo thiếu khoá. Ngôn ngữ RTL (ar, he, fa, ur) tự đặt dir="rtl".

Định dạng số & ngày

n() và d() bọc Intl.NumberFormat / Intl.DateTimeFormat theo locale (vi → vi-VN, ja → ja-JP, zh → zh-CN). Date picker, lịch, bảng và biểu đồ dùng cùng bộ định dạng.

i18n ​

Dịch ​

Tham số & số nhiều ​

Thêm / ghi đè bản dịch ​