|
|
@@ -55,35 +55,33 @@ app.use(ConfigProvider);
|
|
|
|
|
|
### 主题定制
|
|
|
|
|
|
-NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
|
|
|
-来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。
|
|
|
+`NutUI` 组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
|
|
|
+来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。
|
|
|
|
|
|
#### 示例
|
|
|
|
|
|
-这些变量的默认值被定义在 `page` 节点上，HTML 里的所有子节点都可以访问到这些变量：
|
|
|
+这些变量的默认值被定义在 `page` 节点上：
|
|
|
|
|
|
```css
|
|
|
page {
|
|
|
--nut-primary-color: #fa2c19;
|
|
|
--nut-primary-color-end: #fa6419;
|
|
|
- --nut-help-color: #f5f5f5;
|
|
|
- --nut-active-color: rgba(250, 44, 25, 0.15);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### 通过 CSS 覆盖
|
|
|
|
|
|
-你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
|
|
|
+你可以直接在代码中覆盖这些 `CSS` 变量，`Button` 组件的样式会随之发生改变：
|
|
|
|
|
|
```css
|
|
|
/* 添加这段样式后，Primary Button 会变成绿色 */
|
|
|
-page {
|
|
|
+:root {
|
|
|
--nut-button-primary-background-color: green;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### 通过 ConfigProvider 覆盖
|
|
|
-ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量
|
|
|
+`ConfigProvider` 组件提供了覆盖 `CSS` 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量
|
|
|
:::demo
|
|
|
|
|
|
```html
|
|
|
@@ -101,11 +99,11 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
|
|
|
export default {
|
|
|
setup() {
|
|
|
const range = ref(30);
|
|
|
- const themeVars = {
|
|
|
+ const themeVars = {
|
|
|
primaryColor:'#008000',
|
|
|
primaryColorEnd:'#008000',
|
|
|
};
|
|
|
- // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量
|
|
|
+ // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量。
|
|
|
// const themeVars = {
|
|
|
// rangeBgColor: 'rgba(25,137,250,0.15)',
|
|
|
// rangeBarBgColor: '#0289fa',
|
|
|
@@ -124,28 +122,27 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
|
|
|
### 主题变量
|
|
|
#### 基础变量
|
|
|
|
|
|
-NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
|
|
|
+`NutUI` 中的 `CSS` 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
|
|
|
|
|
|
#### 修改变量
|
|
|
-- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
|
|
|
-- 基础变量和组件变量都能通过 `page`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色使用的是`rgba`属性，使用`page`修改主色调会有部分组件变量不生效：
|
|
|
+
|
|
|
+- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于 `red`,`green` 来进行覆盖
|
|
|
+
|
|
|
+- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用 `ConfigProvider 组件` 来修改主色调，因为部分组件的变量激活色的渐变色使用的是 `rgba`，使用 `:root 选择器` 修改主色调会有部分组件变量不生效：
|
|
|
+
|
|
|
```less
|
|
|
-// 如果您仍旧选择使用 page 来进行修改主色调，您还需要修改以下8个组件变量色
|
|
|
+// 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下3个组件变量色 primaryColor为设置的主色调
|
|
|
|
|
|
---nut-calendar-choose-color: rgba(primaryColor,0.09);
|
|
|
---nut-range-bg-color: rgba(primaryColor,0.5);
|
|
|
--nut-address-region-tab-line: linear-gradient(90deg, primaryColor 0%, rgba(primaryColor,0.15) 100%) ;
|
|
|
---nut-radio-label-button-background: rgba(primaryColor,0.05);
|
|
|
---nut-timeselect-timedetail-item-cur-bg-color: rgba(primaryColor,0.15);
|
|
|
---nut-tabs-horizontal-tab-line-color: rgba(primaryColor,0.15);
|
|
|
+--nut-tabs-horizontal-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
|
|
|
--nut-tabs-vertical-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
|
|
|
---nut-sku-item-active-bg: rgba(primaryColor,0.15);
|
|
|
```
|
|
|
|
|
|
#### 变量列表
|
|
|
|
|
|
下面是所有的基础变量：
|
|
|
```less
|
|
|
+ // 主色调
|
|
|
--nut-primary-color: #fa2c19;
|
|
|
--nut-primary-color-end: #fa6419;
|
|
|
// 辅助色
|
|
|
@@ -199,5 +196,5 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|------------|--------------------------------------------------|--------|--------|
|
|
|
| theme | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | string | - |
|
|
|
-| theme-vars | 自定义主题变量，局部生效 | object | - |
|
|
|
-| tag | 根节点对应的 HTML 标签名 | string | div |
|
|
|
+| theme-vars | 自定义主题变量 | object | - |
|
|
|
+| tag | 根节点对应的 HTML 标签名 | string | `div` |
|
suzigang