# 自定义主题

Vue-iClient-MapboxGL 内置了 13 套主题 (opens new window),CSS 命名采用 BEM 的风格,方便使用者覆盖样式。

你可以通过以下方式定义主题。

# 使用 Vue-iClient-MapboxGL 内置主题

// 完整引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueiClient from '@supermapgis/vue-iclient-mapboxgl';
import App from './App.vue';

// 可以通过两种方式使用内置主题
// 1 初始化组件时传入主题配置
Vue.use(VueiClient, { theme: 'light' });

// 2 通过 setTheme 方法设置主题
VueiClient.setTheme('light');

// 按需引入Vue-iClient-MapboxGL
import Vue from 'vue';
import { Button } from '@supermapgis/vue-iclient-mapboxgl';
import { setTheme } from '@supermapgis/vue-iclient-mapboxgl/lib/_utils/style/theme/set-theme'; // 需要引用具体的路径

// 通过 setTheme 方法设置主题。
setTheme('light');

Vue.use(Button);

# 使用自定义主题

你需要定义一个 theme 对象,包含 textColor componentBackground colorGroup 三个属性。

参数 说明 类型 可选值 默认值
textColor 字体颜色 string - -
componentBackground 背景颜色 string - -
colorGroup 颜色数组 string[ ] - -

以上是一些最常用的通用变量,所有样式变量可以在 这里 (opens new window) 找到。

如下例所示:

// 完整引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueiClient from '@supermapgis/vue-iclient-mapboxgl';
import App from './App.vue';

let theme = {
  textColor: '#eee',
  componentBackground: 'rgba(0,0,0,0)',
  colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
};

Vue.use(VueiClient, { theme });
// 或
VueiClient.setTheme(theme);

// 按需引入Vue-iClient-MapboxGL
import { Button } from '@supermapgis/vue-iclient-mapboxgl';
import { setTheme } from '@supermapgis/vue-iclient-mapboxgl/lib/_utils/style/theme/set-theme'; // 需要引用具体的路径

let theme = {
  textColor: '#eee',
  componentBackground: 'rgba(0,0,0,0)',
  colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
};

setTheme(theme);

Vue.use(Button);
最后更新时间: 2024/7/18 下午3:41:26