@chapanda/style-preset-vant
v1.4.3
Published
chapanda style preset
Downloads
344
Maintainers
Readme
@chapanda/style-preset-vant
基于中心规范基础结合 vant
的组件库样式预设.
使用
- 首先通过
vant
提供的VanConfigProvider
,通过使用genChaPandaVantTheme
方法设置主题变量。
注意: 要写全局生效你需要设置theme-vars-scope="global"
。
<template>
<VanConfigProvider
:theme-vars='genChaPandaVantTheme()'
theme-vars-scope="global">
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="success">朴素按钮</van-button>
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="success">禁用状态</van-button>
</VanConfigProvider>
</template>
<script setup lang="ts">
import { genChaPandaVantTheme } from '@chapanda/style-preset-vant'
</script>
- 入口文件
main.tsx
引入scss
样式文件(单靠vant
提供的token
定制主题,无法完全满足样式需求)
import { createApp } from 'vue'
import '@chapanda/style-preset-vant/theme'
import App from './App.vue'
createApp(App).mount('#app')
API
genChaPandaVantTheme
declare function genChaPandaVantTheme(theme?: ConfigProviderThemeVars): {
// ...
// 省略返回类型
}
genChaPandaVantTheme
用于生成符合中心规范的结合 vant
的组件库变量 token
, 它接收一个可选的参数 theme
,
当传入 theme
时,它的将和默认的 chapanda
预设合并,如果存在相同 vant
,
将覆盖 chapanda
预设的 vant
,最终返回 vant
的 theme
对象传递给 VanConfigProvider
组件
参考
关于全局样式(布局对齐、字体、颜色变量等)请阅读 @chapanda/style-preset-base
文档