主题与样式

2018-11-26 14:47:16

主题切换

Framework7内置了9款颜色主题,可以直接在前端Config文件中进行切换

src/front/config/config.js

export default{
  layout: {
    color: '',
  },
  modules: {
    ...
  },
};
名称 缺省值 说明
color blue 9款颜色:red/green/blue/pink/yellow/orange/gray/white/black

覆盖样式

EggBorn还提供了一种机制,可使用项目级别的样式覆盖模块级别的样式

由于模块有两种类型:全局模块局部模块,又支持两种加载方式:异步加载同步加载。因此,为了确保这4种场景下模块样式均可以被正常覆盖,EggBorn提供了一种机制,可以以模块为单位,单独提供需要覆盖的样式

以模块test-todo为例,需要执行以下几个步骤:

  1. 新建目录src/front/assets/css/module/test-todo
  2. 新建样式文件,文件名必须是custom.less
  3. custom.less中增加需要覆盖的样式

src/front/assets/css/module/test-todo/custom.less

.md .button {
  border: orange 1px solid;
}


评论: