Ant Design

一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

官网: https://ant.design/index-cn
文档: https://ant.design/docs/react/introduce-cn

Ant Design of React
这里是 Ant Design 的 React 实现,开发和服务于企业级后台产品。

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 全链路开发和设计工具体系。

支持环境

  • 现代浏览器和 IE9 及以上(需要 polyfills)。
  • 支持服务端渲染。
  • Electron

安装

使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

  1. $ npm install antd --save
  2. $ yarn add antd

如果你的网络环境不佳,推荐使用 cnpm。

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。

我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过UNPKG 进行下载。

强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。
注意:3.0 之后引入 antd.js 前你需要自行引入 moment。

示例

  1. import { DatePicker } from 'antd';
  2. ReactDOM.render(<DatePicker />, mountNode);

引入样式:

  1. import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

按需加载

下面两种方式都可以只加载用到的组件。

  • 使用 babel-plugin-import(推荐)。

    1. // .babelrc or babel-loader option
    2. {
    3. "plugins": [
    4. ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
    5. ]
    6. }

    注意:webpack 1 无需设置 libraryDirectory。

    然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。

    1. // babel-plugin-import 会帮助你加载 JS 和 CSS
    2. import { DatePicker } from 'antd';
  • 手动引入

    1. import DatePicker from 'antd/lib/date-picker'; // 加载 JS
    2. import 'antd/lib/date-picker/style/css'; // 加载 CSS
    3. // import 'antd/lib/date-picker/style'; // 加载 LESS

前端框架Semantic-ui

官网: http://www.semantic-ui.cn/

更快地设计赏心悦目的网站

Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

简洁的 HTML

Semantic UI中词语和类(css clases)是可以相互替换的概念

直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。

取BEM 和 SMACSS 的精华,同时使之更易于使用。

直观明了的 Javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能

开发者可以更改任何组件中的配置来设置该组件中的某一设置

化繁为简的调试

记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。

官网: http://www.semantic-ui.cn/

docker的web管理工具

海鸥

Docker Pulls
GoDoc
Gitter

简介

Seagull 友好的docker Web界面管理工具

  • 易于安装和卸载在Docker容器
  • 单击开始/停止/删除容器和镜像
  • 超快速(小于10ms)的搜索和过滤
  • 支持多主机管理和监控
  • 国际化主要包括英语、汉语、德语和法语

更多信息, 请到 dockerseagull.com, 观看 三分钟视频官方的幻灯片.

github地址

点击跳转: https://github.com/tobegit3hub/seagull

安装

  1. docker run -d -p 10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull

或运行 docker-compose up -d.

截图

多主机

Seagull支持监控多台服务器。确保你开始Docker守护这样。

  1. docker -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock -api-enable-cors=true -d

参与

Seagull is written in Go with tools like Docker, Beego, AngularJS, Bootstrap and JQuery.

  1. Install golang and setup $GOPATH
  2. go get github.com/astaxie/beego
  3. go get github.com/tobegit3hub/seagull
  4. go build seagull.go
  5. sudo ./seagull

More detail in seagull-design-and-implement and we have excellent documents in docs.

提醒

The issue #2 每个人都可以在IP和端口海鸥接触访问您的码头工人守护。为了安全,你可以绑定到本地主机的访问限制。

  1. docker run -d -p 127.0.0.1:10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull

类似的Docker项目

现在有很多类似的项目提供了Web界面来监控Docker。海鸥就是受他们影响并且期望做得比他们更好。

我想把这些项目都介绍给你们,任何人都可以根据他们所需要的进行选择。

Dockerui

这是它的Github主页,https://github.com/crosbymichael/dockerui.

你可以发现海鸥的UI是有点像Dockerui。因为我们都使用了Bootstrap和AngularJS作为前端框架。它是一个很好的项目并且在Github上有差不多2000个关注。

海鸥从Dockerui中学习了很多,包括使用JQuery.Gritter作为网站通知。但Dockerui的界面不够简洁,而且它没有考虑到国际化的需求,而我们考虑到了。我们愿意为全世界的开发者多做些事情。Dockerui还没有实现搜索功能而海鸥则很擅长这点。

Dockerui和海鸥是同类型产品,用于监控Docker。你没必要同时使用他们。而我们的目标就是用一个更友好、更实用的UI满足用户,并且取代Dockerui。

Zdocker

这是它的Github主页,https://github.com/love320/Zdocker.

Zdocker做了同类的事情来监控Docker镜像和容器。但它是使用Java实现的,而且没有提供Docker镜像,而且人们很难使用和学习。

这只能算是个人项目,我并不建议你去使用。因为目前为止我也不知道该怎样去运行它。

Shipyard

这是它的Github主页,https://github.com/shipyard/shipyard.

Shipyard设计来管理一个Docker集群。你必须输入服务器的SSH认证代码才能部署Shipyard引擎。然后你就可以通过命令行或者Web界面在你管理的服务器上部署容器了。

它和海鸥是非常不同的,因为海鸥仅仅是监控Docker而不会要求更多的权限。因此你可以使用Shipyard作为管理系统,同时使用海鸥来监控Docker。

CAdvisor

这是它的Github主页,https://github.com/google/cadvisor.

CAdvisor来自于Google,它主要是为了分析容器的资源。你可以使用它来监控你的容器占用CPU或者内存的历史情况。

然后,你不能用CAdivsor来管理你的镜像和容器。

Docker Registry Web

这是它的Github主页,https://github.com/atc-/docker-registry-web.

这是为Docker参与设计的Web界面。它的UI展示不错但你必须手动添加私有仓库地址。它用了Cookies来存储这个地址所以每次你运行时都要重新添加。

当我尝试去搜索Docker镜像时程序崩溃了。当我尝试去或者镜像详细信息的时候它显示“方法未授权”。

我希望他们可以在我们添加私有仓库时就默认添加Docker官方仓库。但我不太可能因为http://registry.hub.docker.com不支持CORS。

Docker Registry UI

这是它的Github主页,https://github.com/worksap-ate/docker-registry-ui.

这也是为Docker仓库设计的Web界面。它能用但是UI不是很好。

Docker Register Frontend

这是它的Github主页,https://github.com/kwk/docker-registry-frontend.

这几乎是跟Docker-registry-web和Docker-registry-ui是一样的东西。

MUI一个以IOS为参考的移动端前端框架

mui

性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

参考文档

mui官网文档使用Jekyll 构建,立即查看

快速体验

在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;



在线交流

若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;

License

mui遵循MIT License;

开发工具

mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;