Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
89407aa1
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
89407aa1
编写于
8月 22, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Change site struction
上级
51816a9e
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
124 addition
and
58 deletion
+124
-58
docs/download.md
docs/download.md
+2
-2
docs/getting-started.md
docs/getting-started.md
+7
-7
docs/introduce.md
docs/introduce.md
+3
-5
site/templates/aside.html
site/templates/aside.html
+14
-4
site/templates/layout.html
site/templates/layout.html
+1
-1
site/theme.js
site/theme.js
+39
-22
spec/introduce.md
spec/introduce.md
+11
-0
static/style.css
static/style.css
+47
-17
未找到文件。
docs/download.md
浏览文件 @
89407aa1
# 下载
-
category:
React
-
category:
top
-
order: 2
---
...
...
@@ -54,7 +54,7 @@ $ npm install antd@beta --save
## 开发工具
Ant Design
提供了开发构建的命令行工具,可以安装到全局直接使用:
我们
提供了开发构建的命令行工具,可以安装到全局直接使用:
```
bash
$
npm
install
antd-bin
-g
...
...
docs/getting-started.md
浏览文件 @
89407aa1
# 快速上手
-
category:
React
-
category:
top
-
order: 1
---
Ant Design 致力于提供给程序员愉悦的开发体验。
Ant Design
React
致力于提供给程序员愉悦的开发体验。
## 第一个例子
Ant Design
封装了一套基于 React 实现的 UI 组件,可以用 React 的方式直接使用。
我们
封装了一套基于 React 实现的 UI 组件,可以用 React 的方式直接使用。
下面有一个使用了
[
日期选择
](
http://ant.design/components/datepicker
)
组件的简单例子。
...
...
@@ -43,7 +43,7 @@ Ant Design 封装了一套基于 React 实现的 UI 组件,可以用 React 的
## 标准项目
实际项目开发中,你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
Ant Design
提供了一套
`npm`
+
`webpack`
的开发工具链来辅助开发,下面我们用一个简单的实例来说明。
提供了一套
`npm`
+
`webpack`
的开发工具链来辅助开发,下面我们用一个简单的实例来说明。
### 1. 安装命令行工具
...
...
@@ -65,7 +65,7 @@ $ npm install
### 3. 使用组件
编辑
`index.js`
,使用 Ant Design 的组件:
编辑
`index.js`
,使用 Ant Design
React
的组件:
```
jsx
import
React
from
'
react
'
;
...
...
@@ -140,11 +140,11 @@ $ npm run build
入口文件会构建到
`dist`
目录中,你可以自由部署到不同环境中进行引用。
> 上述例子用于帮助你理解 Ant Design 的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。
> 上述例子用于帮助你理解 Ant Design
React
的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。
## 兼容性
Ant Design 支持所有的现代浏览器和 IE8+。
Ant Design
React
支持所有的现代浏览器和 IE8+。
对于 IE8,需要提供
[
es5-shim
](
http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills
)
等 Polyfills 的支持。
...
...
docs/introduce.md
浏览文件 @
89407aa1
# 介绍
-
category:
React
-
category:
top
-
order: 0
---
一套企业级的 UI 设计语言和 React 实现。
设计文档和组件实现均在紧密整理和开发中,部分页面可能不完善,预计 8 月份释出正式版本。
这里是 Ant Design 的 React 实现,主要设计和服务于企业级后台产品。
![](
https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg
)
## 特性
-
提炼自企业级后台产品的交互语言和视觉风格。
-
Designed as Ant Design.
-
丰富实用的 React UI 组件。
-
基于 React 的组件化开发模式。
-
背靠 npm 生态圈。
...
...
site/templates/aside.html
浏览文件 @
89407aa1
...
...
@@ -2,11 +2,20 @@
<aside
class=
"aside-container"
>
<ul>
{%- for category in categories %}
{%- set items = resource.pages|find_category(category) %}
<li>
<h4>
{{category}}
</h4>
{%- if category.name === 'top' %}
{%- for item in category.pages %}
<li
class=
"{%- if item.title === post.title %}current{%- endif %}"
>
<a
href=
"{{permalink_url(item)}}"
class=
"{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"
>
{{item.title}}
<span
class=
"chinese"
>
{{item.meta.chinese}}
</span>
</a>
</li>
{%- endfor %}
{%- else %}
<li
open=
"open"
>
<h4>
{{category.name}}
</h4>
<ul
class=
"{%- if category === post.meta.category %}aside-list-show{%- endif %}"
>
{%- for item in
item
s %}
{%- for item in
category.page
s %}
<li
class=
"{%- if item.title === post.title %}current{%- endif %}"
>
<a
href=
"{{permalink_url(item)}}"
class=
"{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"
>
{{item.title}}
...
...
@@ -16,6 +25,7 @@
{%- endfor %}
</ul>
</li>
{%- endif %}
{%- endfor %}
</ul>
</aside>
site/templates/layout.html
浏览文件 @
89407aa1
...
...
@@ -93,7 +93,7 @@
<a
href=
"/"
>
首页
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}"
>
<a
href=
"/spec/
font
"
>
设计
</a>
<a
href=
"/spec/
introduce
"
>
设计
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs','components']) %}current{%- endif %}"
>
<a
href=
"/docs/introduce"
>
React
</a>
...
...
site/theme.js
浏览文件 @
89407aa1
...
...
@@ -61,28 +61,45 @@ module.exports = function(nico) {
directories
=
[
'
docs
'
,
'
components
'
];
}
var
cacheKey
=
directories
.
join
(
'
-
'
);
var
categories
=
Categories
[
cacheKey
]
||
_
.
uniq
(
getAllPosts
(
posts
).
map
(
function
(
item
)
{
var
itemDirectory
=
item
.
directory
.
split
(
'
/
'
)[
0
];
if
(
directories
.
indexOf
(
itemDirectory
)
>=
0
)
{
return
item
.
meta
.
category
;
}
})).
filter
(
function
(
n
)
{
return
n
!=
undefined
;
});
// React 的分类排序
categories
=
categories
.
sort
(
function
(
a
,
b
)
{
var
cats
=
[
'
React
'
,
'
Components
'
];
a
=
cats
.
indexOf
(
a
);
b
=
cats
.
indexOf
(
b
);
return
a
-
b
;
});
// 设计的分类排序
categories
=
categories
.
sort
(
function
(
a
,
b
)
{
var
cats
=
[
'
文字
'
,
'
色彩
'
,
'
动画
'
];
a
=
cats
.
indexOf
(
a
);
b
=
cats
.
indexOf
(
b
);
return
a
-
b
;
})
var
categories
;
if
(
Categories
[
cacheKey
])
{
categories
=
Categories
[
cacheKey
];
}
else
{
categories
=
{};
_
.
uniq
(
getAllPosts
(
posts
).
forEach
(
function
(
item
)
{
var
itemDirectory
=
item
.
directory
.
split
(
'
/
'
)[
0
];
var
cat
=
item
.
meta
.
category
;
if
(
cat
&&
directories
.
indexOf
(
itemDirectory
)
>=
0
)
{
categories
[
cat
]
=
categories
[
cat
]
||
[];
categories
[
cat
].
push
(
item
);
}
}));
categories
=
Object
.
keys
(
categories
).
map
(
function
(
cat
)
{
var
pages
=
categories
[
cat
].
sort
(
function
(
a
,
b
)
{
a
=
a
.
meta
.
order
||
100
;
b
=
b
.
meta
.
order
||
100
;
return
parseInt
(
a
,
10
)
-
parseInt
(
b
,
10
);
});
return
{
name
:
cat
,
pages
:
pages
};
});
// React 的分类排序
categories
=
categories
.
sort
(
function
(
a
,
b
)
{
var
cats
=
[
'
React
'
,
'
Components
'
];
a
=
cats
.
indexOf
(
a
.
name
);
b
=
cats
.
indexOf
(
b
.
name
);
return
a
-
b
;
});
// 设计的分类排序
categories
=
categories
.
sort
(
function
(
a
,
b
)
{
var
cats
=
[
'
文字
'
,
'
色彩
'
,
'
动画
'
];
a
=
cats
.
indexOf
(
a
.
name
);
b
=
cats
.
indexOf
(
b
.
name
);
return
a
-
b
;
});
}
Categories
[
cacheKey
]
=
categories
;
return
categories
;
},
...
...
spec/introduce.md
0 → 100644
浏览文件 @
89407aa1
# Ant Design
-
category: top
-
order: 0
---
Ant Design 是一个 UI 设计语言,是提炼和应用于企业级金融产品的一套交互语言和视觉体系。
![](
https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg
)
static/style.css
浏览文件 @
89407aa1
...
...
@@ -338,22 +338,22 @@ a.nav-link-disabled {
display
:
block
;
width
:
50px
;
height
:
50px
;
margin
:
auto
;
margin
:
auto
;
animation
:
loadTween
2
S
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
)
infinite
;
-webkit-animation
:
loadTween
2
S
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
)
infinite
;
;
-webkit-animation
:
loadTween
2
S
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
)
infinite
;
;
}
.load-box
span
{
display
:
inline-block
;
.load-box
span
{
display
:
inline-block
;
}
.load-box
span
>
p
{
float
:
left
;
.load-box
span
>
p
{
float
:
left
;
}
.load-main-box
.load-bar
{
width
:
0%
;
height
:
2px
;
background
:
#6EB4E0
;
transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
-webkit-transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
;
.load-main-box
.load-bar
{
width
:
0%
;
height
:
2px
;
background
:
#6EB4E0
;
transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
-webkit-transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
;
}
.load-out
{
-webkit-animation
:
alphaOut
.5s
cubic-bezier
(
0.6
,
-0.28
,
0.735
,
0.045
);
...
...
@@ -384,14 +384,14 @@ footer ul li {
padding
:
5px
2%
15px
;
}
footer
ul
li
>
h2
{
footer
ul
li
>
h2
{
font-size
:
1em
;
color
:
#5C6B77
;
margin
:
10px
auto
0
;
font-weight
:
normal
;
}
footer
ul
li
>
h3
,
footer
ul
li
>
h3
,
footer
h3
{
font-size
:
0.75em
;
color
:
#5C6B77
;
...
...
@@ -425,7 +425,7 @@ footer ul li > a {
}
.aside-container
li
h4
{
font-size
:
1
6
px
;
font-size
:
1
4
px
;
font-weight
:
600
;
padding
:
10px
0
10px
46px
;
margin
:
0
;
...
...
@@ -436,13 +436,32 @@ footer ul li > a {
position
:
relative
;
z-index
:
1
;
background
:
#F9F9F9
;
position
:
relative
;
}
.aside-container
li
>
ul
.aside-list-show
{
.aside-container
li
h4
:after
{
position
:
absolute
;
top
:
11px
;
right
:
30px
;
content
:
"\e600"
;
font-family
:
"anticon"
;
transform
:
scale
(
0.6
);
font-size
:
12px
;
color
:
#5C6B76
;
opacity
:
0.4
;
transform
:
scale
(
0.6
)
rotate
(
180deg
);
transition
:
transform
0.3s
ease
;
}
.aside-container
li
[
open
=
open
]
h4
:after
{
transform
:
scale
(
0.6
)
rotate
(
0deg
);
}
.aside-container
li
>
ul
.aside-list-show
{
display
:
block
;
}
.aside-container
li
>
ul
li
{
.aside-container
li
>
ul
li
{
border-left
:
3px
solid
transparent
;
}
...
...
@@ -455,6 +474,17 @@ footer ul li > a {
color
:
#5C6B76
;
}
.aside-container
>
ul
>
li
>
a
{
padding-left
:
46px
;
font-size
:
14px
;
font-weight
:
600
;
border-left
:
3px
solid
transparent
;
}
.aside-container
>
ul
>
li
.current
>
a
{
border-left
:
0
;
}
.aside-container
.chinese
{
font-size
:
12px
;
margin-left
:
6px
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录