全局化配置 ConfigProvider

可以为组件提供统一的全局化配置。

安装使用

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

全局使用

ConfigProvider 只需在应用外围包裹一次即可全局生效。

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

反黑反白切换

<ti-config-provider darkMode>
  <view />
</ti-config-provider>

theme配置示例

修改主题颜色

const theme = { 
  token: { 
    color: { 
      foundation: { 
        brand: '#0656f3', // 主题色
        marketing: '#0656f3', // 营销色
        striking: '#0656f3' // 价格色
      } 
    } 
  } 
};

修改圆角

const theme = { 
  token: { 
    borderRadius: { 
      default: 4
    } 
  } 
};

修改间距

const theme = { 
  token: { 
    spacing: { 
      horizontal: { default: 6 }  // 盒模型内水平间距
      vertical: { default: 6 }  // 盒模型内垂直间距
      gap: { default: 6 }  // 盒模型外部间距
    },
  } 
};

修改字号

const theme = { token: { fontSize: { default: 20 } } };

修改行高

const theme = { 
  token: { 
    lineHeight: { 
      single: { m: 1.1 }, // 单行行高
      multiline: { m: 1.618 }, // 多行行高
    },
  } 
};

修改某个组件的样式，如修改Button的颜色和圆角

const theme = { 
  components: {
    button: { 
      token: {
        borderRadius: { gradient: 999, default: 0 },
        color: { foundation: { brand: '#0656f3' }}
      }
    },
  },
};