zoukankan      html  css  js  c++  java
  • 【extjs6学习笔记】1.16 初始: 关于主题

    打开app.json,里面有主题设置

       

    主题说明

    theme-base

    这个包是所有其他主题的基础主题,是唯一没有父主题的主题。 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则。 "theme-base"中的样式规则在派生主题中不可配置。 您应该避免覆盖由此主题创建的任何样式规则。

    theme-neutral

    theme-neutral扩展了"theme-base",并且包含绝大多数可配置的风格规则。 可用于配置Ext JS组件外观的大多数变量都在"theme-neutral"中定义。 这些是您的自定义主题可以覆盖的变量。

    theme-neptune

    现代(Modern)的没有边框(border)的主题,扩展"theme-neutral"

    theme-neptune-touch

    theme-neptune-touch是用于触摸的主题. 继承自 "theme-neptune",这个主题包括在平板电脑上使用的"touch-sizing"包

    theme-triton

    使用字体图标的(font-icons)现代(Modern)主题. 继承自 "theme-neptune"

    theme-crisp

    简约主题。扩展"theme-neptune".

    theme-crisp-touch

    基于theme-crisp的触摸主题。 扩展"theme-crisp"。 这个主题包括在平板电脑上使用的"touch-sizing"软件包

    theme-classic

    经典的蓝色Ext JS主题。 扩展"theme-neutral"

    theme-gray

    灰色主题。扩展 "theme-classic".

    theme-aria

    辅助功能主题。 扩展"theme-neptune"。 这个主题包括"aria"包

       

    来自 <http://docs.sencha.com/extjs/6.0.2/guides/core_concepts/theming.html>

       

       

    创建自己的主题

       

    在工作空间目录下执行

    sencha -sdk ext generate theme --extend theme-triton theme-cmcc

    生成文件在工作空间目录的ext/packages/theme-cmcc目录下

       

    应用

    修改app.json文件

       

    更改主题内容,只需运行sencha app watch并在URL中添加以下参数

    ?platformTags=fashion:true

       

    修改

    $base-color:dynamic(#122b3f);

    $body-background-color:dynamic(#10364d);

       

    效果:

       

    说明:

    背景看着没起作用,其实是让上层元素挡住了【修改panel.scss-->$panel-body-background-color:dynamic(transparent);可以解决

       

    参考:

    http://docs.sencha.com/extjs/6.5.0/classic/Global_CSS.html

    http://extjs.org.cn/node/762

       

       

       

  • 相关阅读:
    delphi AlphaControls
    MATLAB 中NORM运用
    matlab画图形函数 semilogx
    fir2(n,f,m)
    离散系统频响特性函数freqz()
    snr ber Eb/N0之间的区别与联系
    MATLAB中白噪声的WGN和AWGN函数的使用
    matlab 功率谱分析
    用matlab实现同一个序列重复N倍
    Stem函数绘图
  • 原文地址:https://www.cnblogs.com/ningth/p/7001267.html
Copyright © 2011-2022 走看看