TechUI Docs

简中

EN

简中

EN

主题

样式工具 ​

Style 模块 提供了对 CSS 和 DOM 类名的底层操作能力。

它不仅封装了安全的类名增删改查方法，还提供了动态向 <head> 注入样式标签以及生成 CSS 变量字符串的能力，是 TechUI 主题系统动态换肤的底层支撑。

引入方式 ​

javascript
import { cssVarGen, styleInit, tClass, tTheme } from "@techui/utils";

动态样式 ​

styleInit(id, info, cssStr) ​

动态创建或更新 <style> 标签。

  • 机制: 如果指定 ID 的 style 标签已存在，则更新其内容；否则创建一个新的标签并追加到 head 中。
  • 参数:
    • id: 标签的唯一 ID后缀 (生成 #style{id})。
    • info: 附加在 dataset.info 上的描述信息。
    • cssStr: 具体的 CSS 代码字符串。
javascript
// 动态注入一段 CSS
styleInit('custom-bg', 'red-theme', 'body { background: red; }');

cssVarGen(prefix, styleObj) ​

CSS 变量生成器。将 JavaScript 对象转换为 CSS 变量定义字符串。

  • 格式: key: value -> --prefix-key: value;
javascript
const colors = { base: '#fff', text: '#000' };
const css = cssVarGen('primary', colors);

console.log(css);
// 输出: "--primary-base: #fff; --primary-text: #000"

类名操作 ​

tClass 提供了一组安全操作 DOM classList 的封装方法，防止因元素不存在导致的报错。

基础方法 ​

  • add(el, cls): 添加类名。
  • del(el, cls): 删除类名。
  • has(el, cls): 判断是否包含类名。
  • toggle(el, cls): 切换类名。
  • list(el): 获取类名列表 (classList)。

replace(el, prefix, suffix) ​

前缀替换。这是 TechUI 状态切换的核心方法。 它会查找元素上所有以 prefix 开头的类名，如果后缀不匹配，则将其删除，并添加新的 ${prefix}${suffix} 类名。

  • 场景: 用于切换状态类，如从 status-loading 切换到 status-success。
javascript
// 假设 el 当前类名: "btn status-loading"

// 切换状态为 success
tClass.replace(el, 'status-', 'success');

// 结果类名: "btn status-success" (旧的 status-loading 被自动移除)

主题注册 ​

tTheme 是 ThemeManager 类的单例实例，作为 TechUI 的全局主题注册中心。

tTheme.register(config) ​

注册一个新的主题配置对象。这通常在应用启动时由主题包自动调用。

javascript
tTheme.register({
  value: 'darkBlue',
  label: '深空蓝',
  scheme: 'dark',
  colors: ['#000', '#fff'],
  data: { ... }
});

tTheme.load() ​

获取所有已注册的主题配置。

tTheme.loadIndex() ​

获取主题的摘要列表（仅包含标识、名称、色系和预览色），通常用于构建“主题切换器” UI 组件。

javascript
const themeList = tTheme.loadIndex();
// [{ value: 'darkBlue', label: '深空蓝', ... }]