Cấu hình toàn cục

Cả ba adapter dùng chung một object cấu hình do createThl() (@thl-ui/core) tạo ra, truyền qua ThlProvider (React), app.use(ThlUI, …) (Vue) hoặc provideThlUI(…) (Angular).

Tuỳ chọn

Tuỳ chọn	Kiểu	Mặc định	Mô tả
prefix	string	'thl'	Prefix cho class và CSS variable
theme	ThlSkin	'default'	12 skin: default · green · yellow · red · purple · black và biến thể -dark (sidebar tối)
colorMode	'light' | 'dark' | 'auto'	'light'	auto theo hệ điều hành
layout	'vertical' | 'mini' | 'horizontal'	'vertical'	3 kiểu layout của AppLayout
fixedHeader / fixedSidebar	boolean	true	Cố định topbar / sidebar
size	'sm' | 'md' | 'lg'	'md'	Cỡ chữ & chiều cao control
radius	'sharp' | 'rounded'	'rounded'	sharp = không bo góc
zIndex	number	1000	Gốc z-index: dropdown = gốc, modal = +50, toast = +80
locale / fallbackLocale	string	'en'	Ngôn ngữ hiện tại / dự phòng
locales	string[]	['en','vi','ja','zh']	Danh sách trong bộ chọn ngôn ngữ
messages	Record<locale, Messages>	{}	Thêm / ghi đè bản dịch
loadLocale	(l) => Promise<Messages>	—	Tải ngôn ngữ lười
components	Partial<ThlComponentDefaults>	xem dưới	Giá trị mặc định cho từng component
persist	boolean | { key }	false	Lưu theme / colorMode / locale / layout… vào localStorage
root	HTMLElement	<html>	Phần tử nhận các thuộc tính data-thl-*

Cơ chế

createThl() ghi cấu hình lên phần tử gốc dưới dạng data attribute; toàn bộ style phản ứng theo các thuộc tính này:

<html lang="vi" data-thl-theme="green-dark" data-thl-color-mode="dark" data-thl-layout="vertical" …>

Đổi cấu hình lúc chạy

Vue

const { config, set } = useThlConfig();
set({ theme: 'purple', colorMode: 'dark' });

React

const [config, set] = useThlConfig();
set({ theme: 'purple', colorMode: 'dark' });

Angular

inject(ThlConfigService).set({ theme: 'purple', colorMode: 'dark' });

Thử: đổi cấu hình toàn cục

SettingsPanel (có sẵn trong AppLayout) chỉ là giao diện cho các lệnh set() này.

Mặc định cho component

createThl({
  components: {
    Button: { rounded: true, size: 'sm' },
    Table: { pageSize: 25, pageSizes: [25, 50, 100], striped: true },
    Toast: { position: 'bottom-right', duration: 5000 },
    Modal: { closeOnBackdrop: false, centered: true },
  },
});

Prop truyền trực tiếp luôn được ưu tiên. Có thể mở rộng kiểu ThlComponentDefaults bằng declaration merging.

Dùng chung một instance

export const thl = createThl({ locale: 'vi', persist: true });
thl.subscribe((c, prev) => { if (c.locale !== prev.locale) api.setLanguage(c.locale); });

<ThlProvider instance={thl}>…</ThlProvider>   // React
app.use(ThlUI, { instance: thl });            // Vue
provideThlUI({ instance: thl });               // Angular