antd_mobile_custom_ui_exa
v0.3.0
Published
Ant Design 移动版的聚宝风格定制版
Downloads
7
Readme
antd_mobile_custom_ui_exa
antd_mobile_custom_ui_exa 是 Ant Design Mobile 针对聚宝风格的 React 实现。 我们在 antd-mobile 的基础上,参照「聚宝 UI 设计规范」进行了风格定制。
Install & Usage
开发
# need `node@6+` `npm@3+`
$ npm i
$ ./node_modules/.bin/gulp # 自动同步 antd-mobile 组件和 demo ,并监控文件变化(注意过程中的提示)
访问
- pc: 本地 http://127.0.0.1:8001
- mobile: 本地 http://127.0.0.1:8002
& npm run pub # 构建并发布到 npm
& gulp site # 构建网站文件,手工放到 GitHub gh-pages 分支即可
风格定制包开发
- 拷贝本仓库。
- 全局替换
antd_mobile_custom_ui_exa
为你的包名,例如xxx-ui
,并修改相应文档的文案。 - 按照上面的
开发
文档,跑起来。 - 在
themes/default.less
文件里覆盖 antd-mobile 提供的相应 less 变量 (可以在此目录添加更多的 theme 文件)。 - 仅覆盖变量无法满足需求,在
components/xx/index.tsx
文件里添加自己的代码逻辑。
组件的目录结构如下:
components/steps
├── demo
│ ├── basic.md // 演示文档,可以有多个
│ └── another.md
├── index.md // 组件的入口文档
├── index.tsx // 组件 JS 入口,通常依赖 antd-mobile 上的对应组件并直接暴露
└── style
├── index.less // 组件样式,通常依赖 antd-mobile 上的对应样式并进行复写
└── index.tsx // 组件样式的入口
通常需要进行复写的源码有以下两个:
index.tsx
使用 typescript 规范进行书写:// 依赖后直接暴露 import Button from 'antd-mobile/lib/steps/index'; export default Button;
import React from 'react'; import Icon from 'antd-mobile/lib/icon/index'; export interface Props { prefixCls?: string; } export default class MyIcon extends React.Component<Props, any> { static defaultProps = { prefixCls: 'am-icon', }; render() { return ( <span className="extend-icon"><Icon {...this.props} /></span> ) } }
style/index.less
@import '~antd-mobile/lib/icon/style/index.less'; .extend-icon { padding: 10px; // extend touch area }