Semantic-UI的React实现(一):架构介绍
React组件化的UI库
目前React组件化的UI有很多,这里有很多已实现的React组件库。如:
- TouchstoneJS - React.js powered UI framework for developing beautifulhybrid mobile apps.
- Elemental UI
- RSuite | 一个基于 React.js 的 Web 组件库
- Ant Design of React - Ant Design
- Material-UI
- React-Bootstrap
- React + Foundation · Foundation as React components
- Essence - React Material Design Framework
- React-MDL: React Components for Material Design Lite
- Belle - Configurable React Components with great UX
- MUI - Material Design CSS Framework
- Grommet
- React Toolbox
- react-blazecss 0.4.3 Demo
- Pivotal UI: Intro
- BFD UI
但是我一直比较偏爱的Semantic-UI不在这个列表中。虽然官方目前也在做相关的工作(戳这里),但目前还没有出稳定版本。个人觉得这正是一个练习的机会,将Semantic-UI库React组件化。
Semantic-UI
Semantic-UI是一套完全语义化设计的前端框架,使用起来灵活又方便,可以满足多变复杂的页面实现需求。从官方文档(版本2.2)来看,主要有四类框架元素:
- 元素
- 组合
- 视图
- 模块
具体示例可参考官网。
基本分析
Semantic-UI实现于语义化设计,各个类可以自由组合使用已实现页面需求。每个组件的属性定义大多类似,如Button和Icon,都有size或者color等常用属性,而这些属性可用公共辅助类来定义和声明。
从实现上来讲,元素、组合和视图的大部分实现,都可以用纯CSS声明来达到效果,但模块类的组件往往需要js的辅助以实现动态效果。考虑到这一点,组件实现大致分为两类实现:UI类和动效类。需要实现3DTransition的组件都继承于动效类,剩余只需CSS声明的组件继承于UI类。当然动效类也同样继承于UI类。
UiElement
UiElement作为所有基础UI组件的基类,主要负责以下几类实现:
- 元素class的生成
- 元素事件回调的生成
基于Semantic-UI的语义化实现,所有class类均由多个属性拼装组成,所以每个UI组件的属性在组件内声明即可,class类的生成由父类UiElement负责。
AmElement
AmElement作为动效组件的父类,主要负责以下功能实现:
- 组件的show/hide接口调用
- 直接操作组件DOM,生成transition的style
每个动效组件继承AmElement后,均将本组件的ref引用传递给父组件,由父组件统一调用并修改子组件的DOM元素style属性,以实现3DTransition效果。
PropsHelper
组件Props的辅助类,用以生成组件的class。PropsHelper中有多个静态方法:
- createStyle:用以生成组件class定义
- getDefaultProps:取得所有组件的通用props
每个组件在生成class定义是,只需提供本组件的props以及属性定义,即可生成对应的class定义。
作者:sheva
来源:51CTO

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Linux 概念架构的理解
摘要 Linux kernel 成功的两个原因: 架构设计支持大量的志愿开发者加入到开发过程中; 每个子系统,尤其是那些需要改进的,都支持很好的扩展性。 正是这两个原因使得 Linux kernel 可以不断进化。 一、Linux内核在整个计算机系统中的位置 Fig 1 – 计算机系统分层结构 分层结构的原则: the dependencies between subsystems are from the top down: layers pictured near the top depend on lower layers, but subsystems nearer the bottom do not depend on higher layers. 这种子系统之间的依赖性只能是从上到下,也就是图中顶部的子系统依赖底部的子系统,反之则不行。 二、内核的作用 虚拟化(抽象),将计算机硬件抽象为一台虚拟机,供用户进程(process)使用;进程运行时完全不需要知道硬件是如何工作的,只要调用 Linux kernel 提供的虚拟接口(virtual interface)即可。 多任务...
- 下一篇
架构师必看 京东咚咚架构演进
咚咚是什么?咚咚之于京东相当于旺旺之于淘宝,它们都是服务于买家和卖家的沟通。 自从京东开始为第三方卖家提供入驻平台服务后,咚咚也就随之诞生了。 我们首先看看它诞生之初是什么样的。 1.0 诞生(2010 – 2011) 为了业务的快速上线,1.0 版本的技术架构实现是非常直接且简单粗暴的。 如何简单粗暴法?请看架构图,如下。 1.0 的功能十分简单,实现了一个 IM 的基本功能,接入、互通消息和状态。 另外还有客服功能,就是顾客接入咨询时的客服分配,按轮询方式把顾客分配给在线的客服接待。 用开源 Mina 框架实现了 TCP 的长连接接入,用 Tomcat Comet 机制实现了 HTTP 的长轮询服务。 而消息投递的实现是一端发送的消息临时存放在 Redis 中,另一端拉取的生产消费模型。 这个模型的做法导致需要以一种高频率的方式来轮询 Redis 遍历属于自己连接的关联会话消息。 这个模型很简单,简单包括多个层面的意思:理解起来简单;开发起来简单;部署起来也简单。 只需要一个 Tomcat 应用依赖一个共享的 Redis,简单的实现核心业务功能,并支持业务快速上线。 但这个简单的模...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS6,7,8上安装Nginx,支持https2.0的开启