快速上手

安装

方式一：ohpm 安装（推荐）

ohpm install @tuniao/tn-ui

方式二：本地引用

将 core/tuniaoui 模块添加到项目中，并在 oh-package.json5 中配置依赖：

{
  "dependencies": {
    "@tuniao/tn-ui": "file:../../core/tuniaoui"
  }
}

初始化

在应用入口文件 EntryAbility.ets 的 onWindowStageCreate 中初始化 TuniaoUI：

import { TnUIInitializer } from "@tuniao/tn-ui";

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    TnUIInitializer.initTnUI(windowStage, this.context);
    windowStage.loadContent("pages/Index");
  }
}

基础使用

import { TnButton } from "@tuniao/tn-ui";

@Entry
@ComponentV2
struct DemoPage {
  build() {
    Column() {
      TnButton({
        content: "主要按钮",
        type: "primary",
        onBtnClick: () => {
          console.info("按钮被点击了");
        },
      })
    }
  }
}

注意事项

WARNING

TuniaoUI 鸿蒙版强制使用 V2 状态管理（@ComponentV2 / @ObservedV2 / AppStorageV2），请勿混用 V1 版本 API。

TIP

所有组件内部通过 baseStyle 获取主题样式，请确保在应用启动时完成初始化，否则样式可能无法正常加载。