Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 6a79fd88 编写于 作者: A afc163
浏览文件
操作

update documentation

上级 0b89f363
隐藏空白更改
内联 并排
Showing with 222 addition and 102 deletion
README.md
浏览文件 @ 6a79fd88
# Ant Design [![](https://travis-ci.org/ant-design/ant-design.svg)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
下一个设计&前端框架，基于 React 的企业级前端开发框架。
一套企业级的前端设计语言和基于 React 的实现。
仍在紧密开发中，预计 8 月份推出 beta 版本。
......@@ -15,18 +15,14 @@
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch3 设计。
## 使用
## 范例
1. script 直接引用 `dist/antd.js` `dist/antd.css`，通过全局变量 antd 使用。
```jsx
var antd = require('antd');
var Datepicker = antd.Datepicker;
2. npm
`npm install antd` 后，使用示例：
```js
require('antd/style/index.less');
require('antd/lib/datepicker');
```
React.render(<Datepicker />, mountNode);
```
## 链接
......@@ -51,7 +47,7 @@ $ npm start
然后访问 http://127.0.0.1:8000 。
#### 部署上线
#### 部署到 ant.design
```bash
$ npm run deploy
......
docs/cases.md 已删除 100644 → 0
浏览文件 @ 0b89f363
# 案例
- category: cases
---
🌰
待补充。
docs/design.md 已删除 100644 → 0
浏览文件 @ 0b89f363
# 设计
- category: design
---
待补充。
docs/develop-as-components.md 已删除 100644 → 0
浏览文件 @ 0b89f363
# 组件开发模式
- category: start
- order: 2
---
待补充。
docs/download.md
浏览文件 @ 6a79fd88
# 下载和应用
# 下载
- category: start
- order: 3
- category: 上手
- order: 2
---
......
docs/getting-started.md
浏览文件 @ 6a79fd88
# 快速上手
- category: start
- category: 上手
- order: 1
---
待补充。
Ant Design 致力于提供设计开发人员一个愉悦的使用体验。
## 第一个例子
Ant Design 封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
一个简单的例子，使用了 [日期选择](http://ant.design/components/datepicker) 组件。
<iframe width="100%" height="400" src="//jsfiddle.net/afc163/k13sq3e3/embedded/result,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
源码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="http://ant.design/dist/antd.css">
<!-- 引入 react 和 antd.js -->
<script src="https://a.alipayobjects.com/react/0.13.3/??react.min.js,JSXTransformer.js"></script>
<script src="http://ant.design/dist/antd.js"></script>
</head>
<body>
</body>
<!-- 直接调用全局变量 -->
<script type="text/jsx">
React.render(<antd.Datepicker />, document.body);
</script>
</html>
```
你可以在[这里](/components/layout/)找到更多组件进行选用。
## 标准项目
实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
Ant Design 提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
### 1. 安装命令行工具
```bash
$ npm install antd-bin -g
```
[更多使用说明](https://github.com/ant-design/antd-bin)。
### 2. 创建一个项目
使用命令行进行初始化。
```bash
$ mkdir antd-demo && cd antd-demo
$ antd init
$ npm install
```
### 3. 使用组件
编辑 `index.js`，使用 Ant Design 的组件：
```jsx
var antd = require('antd');
var Datepicker = antd.Datepicker;
var MyPage = React.creatClass({
render() {
return (<div>
<Datepicker />
<button className="ant-btn ant-btn-primary">确 定</button>
</div>);
}
});
React.render(<MyPage />, document.body);
```
然后建一个页面用于开发。
```bash
$ touch index.html
```
编辑 `index.html` 如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="http://ant.design/dist/antd.css">
<script src="https://a.alipayobjects.com/react/0.13.3/react.min.js"></script>
</head>
<body>
</body>
<!-- 引入入口文件 -->
<script src="/index.js"></script>
</html>
```
然后
### 4. 开发调试
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
```bash
$ npm run dev
```
### 5. 构建和部署
```bash
$ npm run build
```
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
## 兼容性
Ant Design 支持所有的现代浏览器和 IE8+。
对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="http://ant.design/dist/antd.css">
<!-- 引入 react 和 antd.js -->
<script src="https://a.alipayobjects.com/react/0.13.3/react.min.js.js"></script>
<!-- Polyfills -->
<script src="https://a.alipayobjects.com/react/0.13.3/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<script src="http://ant.design/dist/antd.js"></script>
</head>
<body>
</body>
</html>
```
## 小甜点
- 你可以使用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，建议采用 [ES6](https://babeljs.io/docs/learn-es2015/) 的写法来提升编码的愉悦感。
docs/introduce.md
浏览文件 @ 6a79fd88
# 介绍
- category: start
- category: 上手
- order: 0
---
下一个设计&前端框架，来自蚂蚁金服体验技术部的一套全新的企业级前端开发框架。
一套企业级的前端设计语言和基于 React 的实现。
![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
......@@ -17,6 +17,14 @@
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch3 设计。
## 范例
```jsx
var antd = require('antd');
var Datepicker = antd.Datepicker;
React.render(<Datepicker />, mountNode);
```
## 链接
......@@ -25,6 +33,9 @@
- [组件](http://ant.design/components/)
- [React 模块](http://react-component.github.io/)
## 谁在使用
- 蚂蚁金服
## 如何贡献
......
docs/modes.md 已删除 100644 → 0
浏览文件 @ 0b89f363
# 模式
- category: modes
---
待补充。
site/templates/layout.html
浏览文件 @ 6a79fd88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
<script src="/static/script.js"></script>
{% block scripts %}{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="/static/normalize.css"> {% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
<script src="/static/script.js"></script>
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>
<header id="header">
<header id="header">
<a class="logo" href="/">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
{{ config.site.name }}
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
</a>
<div class="search">
<form>
<input type="text" placeholder="search">
<button type="submit"></button>
</form>
<form>
<input type="text" placeholder="search">
<button type="submit"></button>
</form>
</div>
<nav class="nav">
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
<a href="/docs/introduce">上手</a>
</li>
<li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li class="{%- if post.filename === 'design' %}current{%- endif %}">
<a class="disabled" href="/docs/design">设计</a>
</li>
<li class="{%- if post.filename === 'modes' %}current{%- endif %}">
<a class="disabled" href="/docs/modes">模式</a>
</li>
<li class="{%- if post.filename === 'cases' %}current{%- endif %}">
<a class="disabled" href="/docs/cases">案例</a>
</li>
</ul>
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.meta.filepath|isFolder('docs') %}current{%- endif %}">
<a href="/docs/introduce">上手</a>
</li>
<li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li class="{%- if post.meta.filepath|isFolder('design') %}current{%- endif %}">
<a href="/design/">设计</a>
</li>
<li>
<a target="_blank" href="github.com/ant-design/ant-design">Github</a>
</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
{% block aside %}{% endblock %}
{% block content %}{% endblock %}
</div>
{%- include "footer.html" %}
</header>
<div class="main-wrapper">
{% block aside %}{% endblock %} {% block content %}{% endblock %}
</div>
{%- include "footer.html" %}
</body>
</html>
site/theme.js
浏览文件 @ 6a79fd88
......@@ -87,6 +87,9 @@ module.exports = function(nico) {
return items.filter(function(item, i) {
return (i+1)%2 === 0;
});
},
isFolder: function(filepath, folder) {
return filepath.indexOf(folder + '/') === 0;
}
};
......
static/style.css
浏览文件 @ 6a79fd88
......@@ -240,7 +240,7 @@ a.logo {
.nav ul li {
float: left;
width: 16.66%;
width: 20%;
text-align: center;
}
......@@ -268,7 +268,7 @@ a.logo {
}
.nav .bar {
width: 16.66%;
width: 20%;
height: 3px;
position: absolute;
top: 0;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或