Giter VIP home page Giter VIP logo

esui-flat-theme's Introduction

esui-flat-theme

这是什么?

这个东西的产生源于“将esui扁平化”的需求。因此,这就是一个对原有esui样式的包装,并且,为了降低开发者自定义主题的复杂度,特别将一些可定义的指标以变量形式开放出来,开发者引用时,只需要重定义其中的变量值,而不必关心控件的节点架构。

另外,在esui-flat-theme中我们还做了一件事,就是将原有的esui的所有icon背景图标独立化,不再使用雪碧图或者局部雪碧图,这是为将来使用“font-icon”做准备。

有啥限制?

  1. esui-flat-theme只是在原有esui的样式基础上,将“非扁平化”的部分“扁平化”,并提供有限变量值,但在“结构”上并没有给开发者留有自定义余地。因此,当你对esui控件目前的布局结构表示满意和接受,而只是想更改其中的一些字体、颜色、图标背景等样式的时候,那esui-flat-theme很适合你。否则,请无视它的存在,继续以原有方式重写esui的样式吧。

  2. esui-flat-theme不对skin做扁平化处理,事实上,esui本不应该提供skin。

哪些esui控件不包含在其中

没有样式的功能型控件

BoxGroup

CheckBox

Form

Frame

Label

Panel

无所谓扁平化的控件

Crumb

不知道要不要加进来扁平化的控件

Tab

Wizard

Toast

Sidebar

esui-flat-theme's People

Contributors

curarchy avatar dddbear avatar otakustay avatar yanghuabei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

esui-flat-theme's Issues

[TODO] esui-flat-theme 变量的规范化

flat-theme 由于时间问题,没有细致的设计,包括组件 less 的代码差距也非常之大。所以目前仅仅是基于当前组件的 less文件去抽取变量,发现比较混乱。打算在整理完组件变量后先做如下简单的设计工作:

  • 确定组件基础变量,即所有组件一定会对外暴露的 less 变量,比如:background,color,width,height等。
  • 组件各个状态对外暴露基础变量,状态包括default, hover,active,disabled。
  • 各个组件继承基础变量,会扩展自己的变量。
  • 变量的命名规范,包括组件状态下暴露的变量。

注:变量的抽取会根据 ue 规范,若ue 的规范对某个组件的某个样式确定了一致的风格,自然是不需要再对外暴露该样式的变量了。

控件样式的配置会影响子控件

比如对 Button 进行了样式配置,而 Calendar 中有 Button 作为子控件,因此会影响 Calendar 的 Button 样式,需要思考下比较好的解决方案

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.