码迷,mamicode.com
首页 > 移动开发 > 详细

WebAppBuilder自定义主题

时间:2016-07-21 08:39:41      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:

WebAppBuilder自定义主题

by 李远祥

 

基本步骤:

  1. 创建新主题的文件夹
  2. 注册新的主题到manifest.json 文件
  3. 覆盖HeaderController 部件的颜色、
  4. 覆盖panel的颜色
  5. 覆盖弹出框的颜色
  6. 自定义字体

 

主题可以自定义的部分包括Brand的颜色、字体和其他的基础UI属性。以下使用珠宝箱主题进行修改,新的主题修改涉及到UI的一些CSS属性

Background color

Text color

Font family

Font size

Padding

这些UI组件在珠宝箱主题的标题控制组件、panel组件和地图弹出框中。

 

  1. 创建一个新的主题文件夹

    打开webappbuilder的~/client/stemapp/themes/JewelryBoxTheme/styles 文件夹,创建一个新的文件夹为myStyle。在mystyle文件夹下创建名为style.css文件。当然,也可以见将css文件所用到的其他资源如图片等关联到该CSS文件中。

    技术分享

  2. 注册新的主题到manifest.json 文件

    打开~/client/stemapp/themes/JewelryBoxTheme/manifest.json文件

    将以下关于myStyle的属性添加到styles节点中

    A."name"—必须与myStyle的主题匹配

    B. "description"—添加关于主题的描述

    C."styleColor"定义主题在WebAppBuilder的中的显示背景颜色

    技术分享

     

    D.重新启动webAppbuilder 可以看到宝箱主题里面新的样式,如下图

    技术分享

  3. 重写标题控制部件的颜色

更新标题控制部件的颜色方案,可以添加CSS代码到style.css文件中。

  1. 以下代码使背景变成白色(#fff)

    .jimu-main-background {

    background-color: #fff;

    }

    名为background-color 的类名是.jimu-main-background的属性,这是Jimu CSS框架和    其他UI包元素中的其中一个类型,详细的Jimu CSS类,可以查看 CSS框架 ,https://developers.arcgis.com/web-appbuilder/api-reference/css-framework.htm

  2. 使用以下代码将标题和子标题的颜色更改为灰色(#232323)

    技术分享

  3. 使用以下代码移除阴影效果和在底部添加一个边框。与第一和第二步不同的是,这里在使用了一个部件的特殊类名

    技术分享

    注:特定的指定部件类名的写法一般是jimu-widget-{widgetname}这种形式

  4. 修改背景颜色,移除右边框和修改图标的透明度

技术分享

现在可以查看具体的效果了,如下图

技术分享

 

  1. 更改和对齐图标

    让标题栏图标变小一点,使用下面代码

    技术分享

    图标的边缘对齐设置

    技术分享

    让图标变成圆形

    技术分享

    让图标的图片变得更小

    技术分享

     

    修改结果如下

    技术分享

    可以修改选中后的样式

    技术分享

     

    当屏幕缩小时标题栏按钮会自动进行组合,可以修改该组合按钮的样式,例如,一下代码分别为设置组合按钮的对齐方式、背景颜色、图标大小及文字样式

    技术分享

    技术分享

    技术分享

    技术分享

     

    其最终显示效果如下

    技术分享

     

    可以改变标题栏的连接样式,如下

    技术分享

    具体效果

    技术分享

     

     

  2. 修改panel的颜色

Panel微件包括了可扩展微件和屏幕微件,所有的微件都可以修改其背景颜色和标题样式,例如下面代码修改了panel的标题颜色和标题背景

技术分享

将pannel的边框去掉

技术分享

 

展示结果如下

技术分享

  1. 修改弹出框样式

    类似panel的做法,改变弹出框的背景颜色做法如下

    技术分享

     

    技术分享

  2. 使用不同的字体

    可以设置不同的字体

    如果想使用一些网络字体,可以在style.css文件中引用,如

    技术分享

然后修改 .jimu-main-font. 节点值,例如

技术分享

WebAppBuilder自定义主题

标签:

原文地址:http://www.cnblogs.com/lazygis/p/5690412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!