Semantic-UI的React实现(二):CSS类构造模块
更简单的类名标签
Semantic-UI使用了更简单的类名声明。用过Bootstrap的同学都会被其复杂的类名标签折磨过,例如一个简单的按键样式,不论颜色或是大小,都需要btn-前缀声明:
- <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
在Semantic-UI中,类名更接近自然表述:
- <button class="ui blue large active button">Blue Button</button>
语义化的样式声明
样式名并不是对某种组件进行的类型声明,可以通用到其他组件中。例如对于Label(标签)组件,也可用与button相同的CSS类声明其样式:
- <div class="ui blue large active label">Blue Label</div>
这样的好处是显而易见的,CSS类名语义化,刚方便使用和学习。
类名构造模块的实现
从以上细节可以看出,每个组件的类声明均可由公用模块生成,每个组件仅仅声明本模块可使用的Props即可。以Button举例如下:
- import PropHelper from './PropHelper';
- import UiElement from './UiElement';
- ...
- let PROP_TYPES = ['primary', 'size', 'color', 'basic', 'active', ...];
- class Button extends UiElement {
- static propTypes = {
- ...PropHelper.createPropTypes(PROP_TYPES)
- };
- render() {
- let style = this.createElementStyle(this.props, PROP_TYPES, 'button');
- return (
- <div id={this.props.id} className={style} tabIndex='0'>
- {this.props.children}
- </div>
- );
- }
- ...
- }
Button类声明了其可以使用的class类名,通过共通处理生成style即可。生成style的共同处理,由PropsHelper类负责完成。
PropsHelper
PropsHelper类主要的职责有两个:
- 生成各组件所需的class类集合
- 生成各组件的props属性检查定义
PropsHelper作为工具类,相关处理过程中并无状态参与,方法应该声明为静态方法(static)。
props属性检查
Semantci-UI中的所有class类属性的集合是可枚举的,这些属性直接在PropsHelper中定义即可:
- const BOOL_PROPS = ['ui', 'active', 'disabled', 'circular', ...];
- const STRING_PROPS = ['icon', 'appendClass', ...],
- const NUMBER_PROPS = ['column', 'wide', ...],
- const COLLECTION_PROPS = ['color', 'size', 'position', ...];
对于每个组件的属性检查定义,可以遍历传入的属性,并根据名字找到该属性的PropTypes定义。
- class PropsHelper {
- ...
- /**
- * 生成属性检查
- */
- static createPropTypes(propTypes) {
- let result = {};
- propTypes.forEach(function(typeName, index) {
- if (BOOL_PROPS.indexOf(typeName) >= 0) {
- result[typeName] = React.PropTypes.bool;
- }
- else if (STRING_PROPS.indexOf(typeName) >= 0) {
- result[typeName] = React.PropTypes.string;
- }
- else if (NUMBER_PROPS.indexOf(typeName) >= 0) {
- result[typeName] = React.PropTypes.number;
- }
- else if (COLLECTION_PROPS.indexOf(typeName) >= 0) {
- result[typeName] = React.PropTypes.oneOf(PROPS_VALUES[typeName]);
- }
- });
- return result;
- }
- }
class类集合组装
与createPropTypes同样的思路,将传入的组件props遍历一遍,找到各自prop属性的类型定义,根据类型定义编辑和组装该组件的class类集合。
- class PropsHelper {
- ...
- /**
- * 根据属性生成引用的class
- */
- static createStyle(props, types) {
- let style = '';
- for (let i = 0; i < types.length; i++) {
- let type = types[i];
- if (props.hasOwnProperty(type)) {
- style += this.formatStyleValue(props[type], type);
- }
- }
- return style;
- }
- /**
- * 格式化属性对应的class
- */
- static formatStyleValue(value, type) {
- // 如果是数字型属性
- if (NUMBER_PROPS.indexOf(type) >= 0) {
- return ' ' + this.getNumberStr(value) + ' ' + type;
- }
- else if (COLLECTION_PROPS.indexOf(type) >= 0) {
- if (type == 'size') return ' ' + value;
- return ' ' + value + ' ' + type;
- }
- else if (BOOL_PROPS.indexOf(type) >= 0) {
- if (!value) return '';
- if (type == 'imaged') return ' image';
- if (type == 'iconed') return ' icon';
- if (type == 'long') return ' long scrolling';
- if (type == 'equalWidth') return '';
- return ' ' + type;
- }
- else if (STRING_PROPS.indexOf(type) >= 0) {
- return ' ' + value;
- }
- else {
- return '';
- }
- }
- }
这样实现以后,各组件在各自属性的定义和class类声明的处理时获得了两方面的益处:
- 属性统一管理,不用再各自声明
- 代码复用性和耦合性更佳(特别是在复杂组件的使用中)
Semantic-UI的React实现(二):CSS类构造模块相关推荐
- Semantic-UI的React实现(二):CSS类构造模块 1
更简单的类名标签 Semantic-UI使用了更简单的类名声明. 用过Bootstrap的同学都会被其复杂的类名标签折磨过,例如一个简单的按键样式,不论颜色或是大小,都需要btn-前缀声明: < ...
- semantic ui框架学习笔记二
评论组件 文档里的评论组件介绍的比较清晰.这里我就挑一个我喜欢的格式展示出来: <div class="ui comments"><h3 class=" ...
- Semantic UI术语
Semantic UI 的特定术语 术语类型 一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
- SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
- semantic ui html5,css中什么是Semantic UI框架?
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- semantic.css,CSS框架:Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
- React攻略秘籍二:React中使用css的五种方法(包括less与styled-compenents)
一.前言 相信学过vue与react的小伙伴们应该都知道react使用css是多么麻烦,他没有像vue一样的规定好的样式,没有给css规定的作用域这也就react中一个组件样式会出现干扰另外一个组件样 ...
- 【项目实战】个人博客(SpringBoot,SSM,thymeleaf,Semantic UI)——从设计思路到部署一站式教学
一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
最新文章
- 排序算法(更新ing)(C语言实现)(认真的不像实力派)
- python中try_python中try...excpet多种使用方法
- ANSYS——后处理中单元表(ELEMENT table)的作用、创建、使用
- Serverless在SaaS领域的最佳实践
- 重磅!AI大牛邢波出任AI大学校长,李开复姚期智都是校董
- 想快速体验谷歌 Fuchsia OS?FImage 项目来了!
- Data truncation: Data too long for column 'XXXXX' at row 1
- markdown在Windows10下安装后启动出现的错误以及一些解决方案
- 160.相交链表(力扣leetcode) 博主可答疑该问题
- iocomp控件 Crack V512-sp6
- 工程量计算稿1.54安装教程 v1.54pjb
- C#条形码图像生成库
- 前端常用PS技巧总结之更换图片背景颜色
- 温度传感器MLX90614的STM32驱动实现
- 小学生计算机课如何上,如何上好小学信息技术课
- DDSM多区域标注之处理overlay文件框出病灶区域
- Skype for Business Web 应用
- Tableau:画桑基图(详细版)
- 工作流表单手写签章控件失效的处理方法
- Office 2003轻松安装