如何使用

增加 TiConfigProvider 组件，用于设置整体主题皮肤、多语言切换、反黑反白模式设置等.

ConfigProvider 只需在应用外围包裹一次即可全局生效。详见全局化配置 ConfigProvider 使用文档：MiniProgram / [React](/docs/react/components/start/config-provider / Vue / WebComponents。

小程序

安装

npm install @titian-design/weapp

引用

{
  // 原生小程序
  "usingComponents": {
    "ti-config-provider": "@titian-design/weapp/config-provider/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-config-provider": "platform://titian-mp/config-provider"
  }
}

使用

• main.wxml
• page.wxml

code

<ti-config-provider theme="{{theme}}">
  <view />
</ti-config-provider>

<view>
    <TiButton color="#ff0000">按钮</TiButton>
+   <ti-button color="theme.color.brand.1000">按钮</ti-button>
</view>

React

安装

npm install @titian-design/mobile-react

使用

• main.tsx
• app.tsx

code

import { TiConfigProvider } from '@titian-design/mobile-react'

<TiConfigProvider theme={theme}>
  <App />
</TiConfigProvider>

import { useTheme, useToken } from '@titian-design/mobile-react'
const App = () => {
  const theme = useTheme();
  const token = useToken();

  console.log(theme, token('theme.color.foundation.brand'));

  return <div>app</div>
}

Vue

安装

npm install @titian-design/mobile-vue

使用

• main.vue
• app.vue

code

  <template>
    <TiConfigProvider>
      <App />
    </TiConfigProvider>
  </template>

  <script lang="ts" setup>
  import { TiConfigProvider } from '@titian-design/mobile-vue';

  import { createApp } from 'vue';
  import { TitianUI } from 'titian-h5-vue';
  import App from './App.vue';

  const app = createApp(App);
  app.use(TitianUI);
  app.mount('#root');
  </script>

  
  <template>
      <TiButton type="primary">按钮</TiButton>
  </template>

  <script lang="ts" setup>
  import { useTheme, useToken, TiButton } from '@titian-design/mobile-vue';

  const theme = useTheme();
  console.log(theme);
  const token = useToken();
  console.log(token);
  </script>

Web Components

(后补)