Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
33f2863e
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,发现更多精彩内容 >>
提交
33f2863e
编写于
1月 12, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update new design spec style
上级
8d144692
变更
17
隐藏空白更改
内联
并排
Showing
17 changed file
with
195 addition
and
112 deletion
+195
-112
components/icon/index.md
components/icon/index.md
+0
-1
docs/pattern/advanced-search.md
docs/pattern/advanced-search.md
+11
-8
docs/pattern/complex-table.md
docs/pattern/complex-table.md
+8
-8
docs/pattern/form.md
docs/pattern/form.md
+18
-20
docs/pattern/index.md
docs/pattern/index.md
+1
-1
docs/pattern/list.md
docs/pattern/list.md
+9
-13
docs/pattern/navigation.md
docs/pattern/navigation.md
+11
-10
docs/pattern/table.md
docs/pattern/table.md
+18
-18
docs/practice/cases.md
docs/practice/cases.md
+51
-5
docs/react/getting-started.md
docs/react/getting-started.md
+1
-1
docs/react/introduce.md
docs/react/introduce.md
+1
-1
docs/resource/download.md
docs/resource/download.md
+17
-6
docs/resource/reference.md
docs/resource/reference.md
+13
-5
scripts/demo.js
scripts/demo.js
+4
-2
scripts/home.js
scripts/home.js
+2
-2
site/static/style.css
site/static/style.css
+26
-7
site/templates/layout.html
site/templates/layout.html
+4
-4
未找到文件。
components/icon/index.md
浏览文件 @
33f2863e
...
...
@@ -50,7 +50,6 @@
ul.anticons-list {
margin: 20px 0;
list-style: none;
width: 120%;
overflow: hidden;
}
ul.anticons-list li {
...
...
docs/pattern/advanced-search.md
浏览文件 @
33f2863e
...
...
@@ -11,33 +11,36 @@
### 交互
<img
class=
"preview-img"
align=
"right"
description=
"在收起状态时,用户点击“高级搜索”
展开;如果此前用户已经输入过文案,需要将值带到对应的输入框中。"
src=
"https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"交互示例"
description=
"在收起状态时,用户点击『高级搜索』
展开;如果此前用户已经输入过文案,需要将值带到对应的输入框中。"
src=
"https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png"
>
常规型常和表格搭配使用,适合在搜索条件多以及搜索值个数不确定的场景中。
“高级搜索”功能一般开放给中间用户/专家用户使用,一般通过点击“高级搜索”触发;如果非常高频使用,可以默认展开“高级搜索”
。
『高级搜索』功能一般开放给中间用户/专家用户使用,一般通过点击高级搜索』触发;如果非常高频使用,可以默认展开『高级搜索』
。
<br>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"交互示例"
description=
"在『高级搜索』顶部放置 Alert ,用于展现已经输入的值;用户点击『清空』可以清空所有输入值;点击『高级搜索』可以再次展开高级搜索。"
src=
"https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png"
>
当已经输入了值的
“高级搜索”
被隐藏时,需要展示检索条件和值。
当已经输入了值的
『高级搜索』
被隐藏时,需要展示检索条件和值。
### 排列规则
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"排列示例"
src=
"https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png"
>
搜索条件的排布顺序需要和表格中的标题顺序,尽可能保持一致;如果非常高频使用的搜索条件,可以放在最前面。
### 规格
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"规格示例"
src=
"https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png"
>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"规格示例"
src=
"https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png"
>
-
横向排版
在一行不要放置 3 列以上的输入框;标签和输入框应该落在栅格上。
-
纵向排版
使用
`16px`
作为间距。
...
...
@@ -45,7 +48,7 @@
### 交互
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"交互示例"
src=
"https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png"
>
字段型一般会出现在主搜索框底部,适合搜索条件和值都比较少的场景中。
...
...
docs/pattern/complex-table.md
浏览文件 @
33f2863e
#
复杂数据表格
#
表格:复杂数据
-
category: 5
-
order: 5
...
...
@@ -11,42 +11,42 @@
### 多列数据
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"多列数据示例"
src=
"https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png"
>
通过按钮,可实现更多列数据的加载以及左右切换。
<br>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"自定义列示例"
src=
"https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png"
>
提供用户自定义列的功能,方便用户查看需要的列。
<br>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"横向滚动示例"
src=
"https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png"
>
固定表头列,通过横向滚动条来查看剩余内容。
### 带图标的表格
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"带图标表格示例"
src=
"https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png"
>
通过图标强化信息的传递,适用在表达数据变化趋势。
### 带图表的表格
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"带图表表格示例"
src=
"https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png"
>
通过图表来强化信息的传递,适用在表达数据变化趋势。
### 二维表格
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"二维表格示例"
src=
"https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png"
>
横向和纵向各一个标题来展现数据。
### 小表格
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"小表格示例"
src=
"https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png"
>
适用在卡片、弹出框等空间较小的场景中。
docs/pattern/form.md
浏览文件 @
33f2863e
...
...
@@ -25,14 +25,14 @@
## 内容
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/RSeLkJwbpYNLDHd
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"结构示例"
src=
"https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe
.png"
>
通常表单会有四个部分组成。
1.
标签
2.
输入框
3.
动作
4.
校验反馈
3.
校验反馈
4.
动作
> 注:`*` 表明该项为必填项。
...
...
@@ -70,20 +70,20 @@
<br>
<img
class=
"preview-img"
align=
"right"
alt=
"不禁用示例"
src=
"https://os.alipayobjects.com/rmsportal/
BwFnQjZkHtigQGd
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"不禁用示例"
src=
"https://os.alipayobjects.com/rmsportal/
GwZhvOuXmwqUIUW
.png"
>
当输入框非常多时(尤其是输入项中交叉了必填项和非必填项),整个反馈链路冗长又复杂,禁用规则难以被识别,容易引起困惑。
### 结构化的格式
<img
class=
"preview-img"
align=
"right"
alt=
"
输入格式化的数据
"
src=
"https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"
结构化的格式示例
"
src=
"https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png"
>
用户对输入的内容很熟悉,且系统不希望接受任何偏离期望的格式。
### 输入提示 & 输入提醒
<img
class=
"preview-img"
align=
"right"
alt=
"输入提示"
description=
"在输入框激活后,输入提示一直出现至该输入框失去焦点。"
src=
"https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"输入提醒"
description=
"在输入框激活后,输入提醒不要马上消失,等用户完成第一个词输入后再消失。"
src=
"https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"输入提示
示例
"
description=
"在输入框激活后,输入提示一直出现至该输入框失去焦点。"
src=
"https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"输入提醒
示例
"
description=
"在输入框激活后,输入提醒不要马上消失,等用户完成第一个词输入后再消失。"
src=
"https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png"
>
输入提示:不希望在标签上放置太多文字进行解释,同时只有标签又会引起误解。
...
...
@@ -91,16 +91,16 @@
### 密码加强计
<img
class=
"preview-img"
align=
"right"
alt=
"密码强度"
src=
"https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"密码强度
示例
"
src=
"https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png"
>
提供关于密码强度和有效性的及时反馈,适用在注册页面时的密码输入框。
### 校验
<img
class=
"preview-img"
align=
"right"
alt=
"输入时的实时校验
"
src=
"https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"输入框失去焦点后的校验
"
src=
"https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png"
>
<img
class=
"preview-img"
align=
"right"
description=
"输入时的实时校验。
"
src=
"https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png"
>
<img
class=
"preview-img"
align=
"right"
description=
"输入框失去焦点后的校验。
"
src=
"https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"点击『提交』后,系统将处理结果直接在页面上进行反馈(统计错误数量和标记错误内容)。"
src=
"https://os.alipayobjects.com/rmsportal/xSxzKxNMqQyIcXr
.png"
>
<img
class=
"preview-img"
align=
"right"
description=
"点击『提交』后,系统将处理结果直接在页面上进行反馈(统计错误数量和标记错误内容)。"
src=
"https://os.alipayobjects.com/rmsportal/PLdlPvaebRdJOgu
.png"
>
通过不同的『校验』规则和形式进行反馈,避免用户在点击提交后才刚刚开始『校验』,让用户提前纠正错误。
...
...
@@ -121,8 +121,8 @@
### 输入框宽度
<img
class=
"preview-img"
align=
"right"
alt=
"正确示例"
src=
"https://os.alipayobjects.com/rmsportal/
ziTMevqClLTYagX
.png"
good
>
<img
class=
"preview-img"
align=
"right"
alt=
"错误示例"
src=
"https://os.alipayobjects.com/rmsportal/
ziTMevqClLTYagX
.png"
bad
>
<img
class=
"preview-img"
align=
"right"
alt=
"正确示例"
src=
"https://os.alipayobjects.com/rmsportal/
vypllNQZsEHRszB
.png"
good
>
<img
class=
"preview-img"
align=
"right"
alt=
"错误示例"
src=
"https://os.alipayobjects.com/rmsportal/
XSLwnrlLbKFjiNj
.png"
bad
>
当内容可预知,可以根据内容长短进行定义其落在多少个栅格上。
...
...
@@ -130,23 +130,21 @@
### 对齐方式
<img
class=
"preview-img"
align=
"right"
alt=
"间隔示例"
src=
"https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png"
>
无论左对齐、右对齐还是顶部对齐,都有其优缺点和应用场景,所以正确的解决方案取决于具体目标和制约因素,诸如:希望用户加快或者降低填写速度(有时设计者希望用户深思熟虑每个输入)、屏幕显示的限制、本地化考虑等多种因素。
<br>
<img
class=
"preview-img"
align=
"right"
alt=
"右对齐(推荐)"
src=
"https://os.alipayobjects.com/rmsportal/
ziTMevqClLTYagX
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"右对齐(推荐)"
src=
"https://os.alipayobjects.com/rmsportal/
UxGJfenYBKvkEEB
.png"
>
右对齐(推荐)。
-
优点:
减少
垂直空间。
-
优点:
节约
垂直空间。
-
缺点:降低可读性;标签长度和输入框弹性小。
-
场景:既要减少垂直空间,又要加快填写速度。
<br>
<img
class=
"preview-img"
align=
"right"
alt=
"顶部对齐"
src=
"https://os.alipayobjects.com/rmsportal/
ziTMevqClLTYagX
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"顶部对齐"
src=
"https://os.alipayobjects.com/rmsportal/
AsyyNKormNdEMLi
.png"
>
顶部对齐。
...
...
@@ -156,10 +154,10 @@
<br>
<img
class=
"preview-img"
align=
"right"
alt=
"左对齐"
src=
"https://os.alipayobjects.com/rmsportal/
ziTMevqClLTYagX
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"左对齐"
src=
"https://os.alipayobjects.com/rmsportal/
eqUyDExbRlAQoas
.png"
>
左对齐。
-
优点:
容易浏览;减少
垂直空间。
-
优点:
文字开头按阅读视线对齐,方便阅读;节约
垂直空间。
-
缺点:填写速度慢;标签长度和输入框弹性小。
-
场景:希望用户放慢速度,仔细思考表单中的每个输入框。
docs/pattern/index.md
浏览文件 @
33f2863e
...
...
@@ -6,4 +6,4 @@
---
占位
。
敬请期待
。
docs/pattern/list.md
浏览文件 @
33f2863e
...
...
@@ -17,14 +17,10 @@
### 显示详情信息
<img
class=
"preview-img"
align=
"right"
alt=
"气泡显示示例"
src=
"https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"气泡显示示例"
description=
"使用“点击”触发时,应当保证激活/禁用的对称性,即在哪里打开,就在哪里关闭;另外。也支持用户点击空白区域关闭。<hr>
使用“悬停”触发时,移入时设计约 0.5 秒的延时,然后激活详情气泡;移出时,立即关闭详情气泡。"
src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">
气泡显示:用户鼠标点击/悬停某个链接或内容时,在悬浮层上显示该条列表项少量的详情信息。
使用“点击”触发时,应当保证激活/禁用的对称性,即在哪里打开,就在哪里关闭;另外。也支持用户点击空白区域关闭。
使用“悬停”触发时,移入时设计约 0.5 秒的延时,然后激活详情气泡;移出时,立即关闭详情气泡。
<br />
<img class="
preview-img
"
align=
"right"
alt=
"列表嵌入示例1"
src=
"https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png"
>
...
...
@@ -37,43 +33,43 @@
<br
/>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/iVbJiWqvXIswNWP.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"弹出层显示示例"
src=
"https://os.alipayobjects.com/rmsportal/iVbJiWqvXIswNWP.png"
>
弹出层显示:用户通过点击,在弹出框中查看该列表项的详情信息,但是当前列表项的上下文关系会被打断。
<br
/>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/hEGPuWWOEvvbZLw.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"双面板选择器示例"
src=
"https://os.alipayobjects.com/rmsportal/hEGPuWWOEvvbZLw.png"
>
双面板选择器:用户通过点击,在列表的一侧(一般为右侧)查看该列表项大量的详情信息。
<br
/>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/JRuDZoiPEskztoi.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"单窗口深入示例"
description=
"用户通过点击,该列表项的详情信息会替换列表所在的显示区域;用户通过『面包屑』、按钮或者浏览器自带返回按钮,从详情返回列表。"
src=
"https://os.alipayobjects.com/rmsportal/JRuDZoiPEskztoi.png"
>
单窗口深入:用户通过点击,在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系,适用在详情信息之间完全无关,或者屏幕空间实在狭小(eg:移动应用),又或者列表和内容可能非常多的应用场景中。
### 显示更多文本
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"宽行示例"
src=
"https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png"
>
宽行:使某些列表项可以扩展为多行文本行来显示足够的文本内容。
<br
/>
<img
class=
"preview-img"
align=
"right"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"对等网格示例"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png"
>
对等网格:以网格或者矩阵的方式排列内容元素,其中每个元素都有相仿的视觉重量。
### 显示图片
<img
class=
"preview-img"
align=
"right"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"走马灯示例"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png"
>
走马灯:以一维的形式来显示图片,可用户主动触发或者系统自动播放。
<br
/>
<img
class=
"preview-img"
align=
"right"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"缩略图网格示例"
noPadding
src=
"https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png"
>
缩略图网格:以二维的形式来展现图片/Icon,具有强烈的视觉效果,可以吸引用户注意。
...
...
@@ -85,7 +81,7 @@
<br
/>
<img
class=
"preview-img"
align=
"right"
description=
"当需要对数据进行频繁操作时,分页器会导致操作变的笨拙,尤其是出现一些跨页选择时,所以适合用无限加载;当倾向显示用户的
“个人所有”
的数据时(例如:个人订单),或者数据不是临时性的,适合使用无限加载。"
src=
"https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png"
>
<img
class=
"preview-img"
align=
"right"
description=
"当需要对数据进行频繁操作时,分页器会导致操作变的笨拙,尤其是出现一些跨页选择时,所以适合用无限加载;当倾向显示用户的
个人所有
的数据时(例如:个人订单),或者数据不是临时性的,适合使用无限加载。"
src=
"https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png"
>
无限加载:当用户加载到第一段内容的最下方,通过监听滚轮事件或者用户点击按钮,继续加载下一段内容。
...
...
docs/pattern/navigation.md
浏览文件 @
33f2863e
...
...
@@ -44,7 +44,7 @@
---
<img
class=
"preview-img"
noPadding
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/BywMIfnGDOyWivF
.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"结构示例"
src=
"https://os.alipayobjects.com/rmsportal/DKtNtqOckLayIpj
.png"
>
导航的结构由以下几部分组成。
...
...
@@ -53,8 +53,7 @@
3.
登陆工具
4.
面包屑(可选)
> 注:
> 1. 尽可能不使用面包屑,尤其是当前页面的导航能清晰的告诉用户他在哪里时;
> 1. 尽可能不使用面包屑,尤其是当前页面的导航能清晰的告诉用户他在哪里时。
> 2. 面包屑可以分为这几类:
> - 路径型:是一个动态显示用户到达页面经过的途径。
> - 位置型:位置型是固定的,显示了页面在网站结构中的位置。
...
...
@@ -64,7 +63,9 @@
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"一级类目"
src=
"https://os.alipayobjects.com/rmsportal/GsVlBheKLGHCRLe.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"多级类目展开"
src=
"https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"二级类目"
src=
"https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"三级类目及以上"
src=
"https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png"
>
我们定义了不同类目层级所对应的导航样式。
...
...
@@ -73,19 +74,19 @@
---
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"
顶部导航结构
"
src=
"https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"
结构示例
"
src=
"https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png"
>
结构如右图所示:
1.
产品 Logo 和名称
。
2.
业务类目
。
3.
登陆工具
。
4.
面包屑(可选)
。
1.
产品 Logo 和名称
2.
业务类目
3.
登陆工具
4.
面包屑(可选)
<br>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"二级类目"
src=
"https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"
四级类目
"
src=
"https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png"
>
<img
class=
"preview-img"
noPadding
align=
"right"
alt=
"
三级类目及以上
"
src=
"https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png"
>
不同类目层级。
docs/pattern/table.md
浏览文件 @
33f2863e
...
...
@@ -9,21 +9,21 @@
## 内容
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"结构示例"
src=
"https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png"
>
通常表格的组成元素以及相关元素会有,这几部分组成。
1.
按钮组
2.
搜索条件
3.
筛选
4.
排序
3.
排序
4.
筛选
5.
状态点
6.
单行操作
7.
分页器/无限加载(可选)
### 筛选
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"筛选示例"
src=
"https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png"
>
当该列选项有限,用户又希望只查看一个或者多个值时,可考虑使用。
...
...
@@ -35,7 +35,7 @@
### 更多操作
<img
class=
"preview-img"
align=
"right"
alt=
"依次分别为:完整内容、暂时不可用、没有该权限。"
src=
"https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"
更多操作示例"
description=
"
依次分别为:完整内容、暂时不可用、没有该权限。"
src=
"https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png"
>
该项暂时不可用时,直接灰化该操作;用户没有该权限时,直接隐藏该操作。
...
...
@@ -43,10 +43,10 @@
<img
class=
"preview-img"
align=
"right"
alt=
"名称跳转示例"
src=
"https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png"
>
把ID、名称等唯一性的表格项处理成文字链,点击后跳转至详情。
把
ID、名称等唯一性的表格项处理成文字链,点击后跳转至详情。
-
优点:节省空间;
-
缺点:可发现性较低;点击区域受到内容限制,可能出现不易点击的情况
-
缺点:可发现性较低;点击区域受到内容限制,可能出现不易点击的情况
。
<br>
...
...
@@ -69,11 +69,11 @@
### 全选数据
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"状态一"
src=
"https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png"
>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"点击 Table 顶部的复选框,出现『Alert』"
src=
"https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym
.png"
>
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym
.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"点击『选择全部』"
src=
"https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut
.png"
>
当使用了分页器,又想实现全选数据的功能,可以结合『Alert』来实现。
...
...
@@ -93,33 +93,33 @@
### 固定按钮组
<img
class=
"preview-img"
align=
"right"
alt=
"顶部固定
按钮
"
src=
"https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"顶部固定
示例
"
src=
"https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"底部固定
按钮
"
src=
"https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"底部固定
示例
"
src=
"https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png"
>
用在表格行数很多时(一般多于
20
行),又想对表格数据进行频繁的操作时,尤其适用在无限加载的表格中。
用在表格行数很多时(一般多于
20
行),又想对表格数据进行频繁的操作时,尤其适用在无限加载的表格中。
### 某一项内容过长
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"气泡显示示例"
description=
"当过长信息可以被隐藏时,用户悬浮/点击该项时,用『Tooltip/Popover』来显示完整内容。"
src=
"https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png"
>
某一项内容过长/不确定长度,既不希望用户在列表和详情之间来回跳转,又不希望不确定的数据撑爆表格时。
### 模块编辑
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"模块编辑示例"
description=
"启动和禁用要尽可能相似(对称性交互);保证启用和禁用切换时,页面不在水平方向不错位。"
src=
"https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png"
>
适用在易读性高于易编辑性时;适用在有一定数量的项需要编辑时。
### 直接编辑
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"直接编辑示例"
description=
"用户输入后,系统需要及时保存数据。"
src=
"https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png"
>
适用在易编辑性高于易读性时。
### 悬浮层编辑
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"悬浮层编辑示例"
src=
"https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png"
>
悬浮层会遮挡部分页面,适用在上下文对编辑任务不那么重要时。
...
...
@@ -149,7 +149,7 @@
### 对齐方式
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png"
>
<img
class=
"preview-img"
align=
"right"
alt=
"对齐示例"
src=
"https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png"
>
数值右对齐(带小数则按小数点对齐),其余左对齐。
...
...
docs/practice/cases.md
浏览文件 @
33f2863e
...
...
@@ -7,7 +7,7 @@
Ant Design 是面向中后台的 UI 设计语言。
从 2015 年 4 月起,Ant Design 在蚂蚁金服中后台产品线迅速推广,对接多条业务线,覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员,具有学习成本低、上手速度快、实现效果好等特点,并且提供从
设计到前端实现
的全链路生态,可以大大提升设计和开发的效率。
从 2015 年 4 月起,Ant Design 在蚂蚁金服中后台产品线迅速推广,对接多条业务线,覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员,具有学习成本低、上手速度快、实现效果好等特点,并且提供从
界面设计到前端开发
的全链路生态,可以大大提升设计和开发的效率。
## 最佳实践
...
...
@@ -19,7 +19,7 @@ Ant Design 是面向中后台的 UI 设计语言。
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png"
>
是面向金融机构深度定制的行业云计算服务;助力金融机构向新金融转型升级,推动平台、数据和技术方面的能力全面对外开放。
金融云
是面向金融机构深度定制的行业云计算服务;助力金融机构向新金融转型升级,推动平台、数据和技术方面的能力全面对外开放。
<a
class=
"outside-link"
href=
"https://www.cloud.alipay.com/"
target=
"_blank"
>
立即访问
</a>
...
...
@@ -31,7 +31,9 @@ Ant Design 是面向中后台的 UI 设计语言。
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png"
>
OceanBase是 一款真正意义上的云端分布式关系型数据库,而 OceanBase Cloud Platform(云平台)是以 OceanBase 数据库为基础的云服务,可以帮助用户快速创建、使用 OB 服务。
OceanBase 是一款真正意义上的云端分布式关系型数据库,而 OceanBase Cloud Platform(云平台)是以 OceanBase 数据库为基础的云服务,可以帮助用户快速创建、使用 OB 服务。
<a
class=
"outside-link internal"
href=
"http://oceanbase.alipay.com/"
target=
"_blank"
>
立即访问
</a>
---
...
...
@@ -43,7 +45,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库,而 Oce
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png"
>
体验平台是将用户与公司所有的接触点包括来电咨询/微博等渠道数据,通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队/产品经理,推动体验问题解决,实现良性运转流。
体验平台是收集用户与公司所有的接触点(包括来电咨询/微博等渠道)的数据,通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队/产品经理,并推动体验问题解决,从而实现良性运转流。
<a
class=
"outside-link internal"
href=
"http://tiyan.alipay.com/"
target=
"_blank"
>
立即访问
</a>
---
...
...
@@ -53,7 +57,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库,而 Oce
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png"
>
AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来,并用分享给所有需要数据可视理论的人。
AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀,并分享给所有需要数据可视理论的人。
<a
class=
"outside-link internal"
href=
"http://antv.alipay.net/"
target=
"_blank"
>
立即访问
</a>
<style>
.preview-image-boxes {
...
...
@@ -66,4 +72,44 @@ AntV 是把这几年来数据图形组在探索数据可视化过程中有价值
.toc {
display: none;
}
.outside-link.internal {
display: none;
}
</style>
<script>
(function() {
var links = Array.apply(null, document.querySelectorAll('.outside-link.internal'));
var checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
ping(checkImgUrl, function(status) {
if (status === 'responded') {
links.forEach(function(link) {
link.style.display = 'block';
});
}
});
function ping(url, callback) {
var img = new Image();
var done;
var finish = function(status) {
if (!done) {
done = true;
img.src = '';
callback(status);
}
}
img.onload = function() {
finish('responded');
};
img.onerror = function(e) {
finish('error');
};
img.src = url;
setTimeout(function() {
console.log('timeout');
finish('timeout');
}, 1500);
}
})();
</script>
docs/react/getting-started.md
浏览文件 @
33f2863e
...
...
@@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
## 第一个例子
最简单的试用方式参照以下 JSFiddle 演示
, 也推荐 Fork 本例来进行
`Bug Report`
,
注意不要在实际项目中这样使用。
最简单的试用方式参照以下 JSFiddle 演示
,也推荐 Fork 本例来进行
`Bug Report`
,
注意不要在实际项目中这样使用。
-
[
antd JSFiddle
](
http://jsfiddle.net/0dso5y0x/
)
...
...
docs/react/introduce.md
浏览文件 @
33f2863e
...
...
@@ -27,7 +27,7 @@
## 特性
-
Designed as Ant Design
,
提炼和服务企业级中后台产品的交互语言和视觉风格。
-
Designed as Ant Design
,
提炼和服务企业级中后台产品的交互语言和视觉风格。
-
[
React Component
](
http://react-component.github.io/badgeboard/
)
上精心封装的高质量 UI 库。
-
基于 npm + webpack + babel 的工作流,支持 ES2015。
...
...
docs/resource/download.md
浏览文件 @
33f2863e
...
...
@@ -8,7 +8,7 @@
这里提供 Ant Design 相关设计资源和设计工具的下载,更多设计资源正在整理和完善中。
<a
target=
"_blank"
href=
"https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip"
class=
"resource-card"
>
<img
src=
"https://os.alipayobjects.com/rmsportal/
bAfRYPEppiuUQjR
.png"
>
<img
src=
"https://os.alipayobjects.com/rmsportal/
cnmjGfbBWUZPFiO
.png"
>
<span
class=
"resource-card-content"
>
<span
class=
"resource-card-title"
>
Axure Components
</span>
<span
class=
"resource-card-description"
>
一套强大的 Ant Design 的 Axure 部件库
</span>
...
...
@@ -22,7 +22,7 @@
</span>
</a>
<a
target=
"_blank"
href=
"https://github.com/ant-design/ant-design/releases/download/0.11.2/AntD_Box_v1.2.rp"
class=
"resource-card"
>
<img
src=
"https://os.alipayobjects.com/rmsportal/
QCKTwaWQLEOXtgL
.png"
>
<img
src=
"https://os.alipayobjects.com/rmsportal/
UuYRXxndGMKdaiE
.png"
>
<span
class=
"resource-card-content"
>
<span
class=
"resource-card-title"
>
Axure Box
</span>
<span
class=
"resource-card-description"
>
强大的 Ant Design 组件拼装方式
</span>
...
...
@@ -38,16 +38,19 @@
<style>
.resource-card {
width: 350px;
max-width: 350px;
width: 40%;
height: 130px;
border: 1px solid #e9e9e9;
border-radius:
12
px;
border-radius:
6
px;
font-size: 12px;
color: #777;
display: inline-block;
margin: 20px 40px 10px 0;
vertical-align: middle;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.resource-card:hover {
...
...
@@ -68,19 +71,27 @@
vertical-align: middle;
width: 50px;
margin: 0 20px 0 24px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.resource-card-content {
display: inline-block;
vertical-align: middle;
height: 130px;
padding-top: 36px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 92px;
}
.resource-card-title {
display: block;
font-size: 16px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.resource-card-description {
...
...
docs/resource/reference.md
浏览文件 @
33f2863e
...
...
@@ -5,7 +5,7 @@
---
在进行模式、组件和语言的整理中,《
交互设计精髓
》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计:点石成金的艺术》等书籍给了我们很多的启示,帮助我们节约了大量时间,并成功克服了很多困难。如果想了解更多设计相关的内容,建议你去阅读这些非常棒的书籍。
在进行模式、组件和语言的整理中,《
About Face 4
》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计:点石成金的艺术》等书籍给了我们很多的启示,帮助我们节约了大量时间,并成功克服了很多困难。如果想了解更多设计相关的内容,建议你去阅读这些非常棒的书籍。
<a
target=
"_blank"
href=
"http://book.douban.com/subject/26642302/"
class=
"resource-card"
>
<img
src=
"https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png"
>
...
...
@@ -66,16 +66,19 @@
<style>
.resource-card {
width: 350px;
max-width: 350px;
width: 40%;
height: 130px;
border: 1px solid #e9e9e9;
border-radius:
12
px;
border-radius:
6
px;
font-size: 12px;
color: #777;
display: inline-block;
margin: 20px 40px 10px 0;
vertical-align: middle;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.resource-card:hover {
...
...
@@ -96,13 +99,18 @@
vertical-align: middle;
width: 64px;
margin: 0 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.resource-card-content {
display: inline-block;
vertical-align: middle;
height: 130px;
padding-top: 24px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 106px;
}
.resource-card-title {
...
...
scripts/demo.js
浏览文件 @
33f2863e
...
...
@@ -179,15 +179,17 @@ const PriviewImg = React.createClass({
imgStyle
.
background
=
'
none
'
;
}
const
current
=
this
.
state
.
current
;
const
arrows
=
imgsPack
.
length
>
1
;
const
createMarkup
=
()
=>
{
return
{
__html
:
this
.
props
.
description
}
};
return
(
<
div
className
=
"
preview-image-box
"
style
=
{{
width
:
this
.
props
.
width
}}
>
<
div
className
=
{
`preview-image-wrapper
${
goodCls
}
${
badCls
}
`
}
>
<
img
src
=
{
this
.
props
.
src
}
onClick
=
{
this
.
showImageModal
}
style
=
{
imgStyle
}
alt
=
"
Sample Picture
"
/>
<
/div
>
<
div
className
=
"
preview-image-title
"
>
{
this
.
props
.
alt
}
<
/div
>
<
div
className
=
"
preview-image-description
"
>
{
this
.
props
.
description
}
<
/div
>
<
div
className
=
"
preview-image-description
"
dangerouslySetInnerHTML
=
{
createMarkup
()}
/
>
<
Modal
className
=
"
image-modal
"
width
=
"
960
"
visible
=
{
this
.
state
.
visible
}
onCancel
=
{
this
.
handleCancel
}
footer
=
""
title
=
""
>
<
Carousel
afterChange
=
{
this
.
handleImgChange
}
adaptiveHeight
arrows
>
<
Carousel
afterChange
=
{
this
.
handleImgChange
}
adaptiveHeight
arrows
=
{
arrows
}
>
{
imgsPack
.
map
((
img
,
i
)
=>
<
div
key
=
{
i
}
>
...
...
scripts/home.js
浏览文件 @
33f2863e
...
...
@@ -2,7 +2,6 @@ const React = require('react');
const
ReactDOM
=
require
(
'
react-dom
'
);
import
{
QueueAnim
,
Icon
,
Button
}
from
'
../index
'
;
import
ScrollOverPack
from
'
rc-scroll-anim/lib/ScrollOverPack
'
;
import
EventDispatcher
from
'
rc-scroll-anim/lib/EventDispatcher
'
;
import
TweenOne
from
'
rc-tween-one
'
;
// 导航处理
...
...
@@ -16,7 +15,8 @@ function scrollNavEvent() {
}
}
EventDispatcher
.
addEventListener
(
'
scroll.scrollNavEvent
'
,
scrollNavEvent
);
$
(
window
).
off
(
'
scroll.scrollNavEvent
'
);
$
(
window
).
on
(
'
scroll.scrollNavEvent
'
,
scrollNavEvent
);
class
Banner
extends
React
.
Component
{
constructor
()
{
...
...
site/static/style.css
浏览文件 @
33f2863e
...
...
@@ -551,8 +551,8 @@ footer ul li > a {
.markdown
>
ul
li
,
.markdown
blockquote
ul
>
li
{
list-style
:
circle
;
margin-left
:
1em
;
padding-left
:
0.4em
;
margin-left
:
20px
;
padding-left
:
4px
;
}
.markdown
>
ul
li
p
,
...
...
@@ -563,8 +563,8 @@ footer ul li > a {
.markdown
>
ol
li
,
.markdown
blockquote
ol
>
li
{
list-style
:
decimal
;
margin-left
:
1em
;
padding-left
:
0.4em
;
margin-left
:
20px
;
padding-left
:
4px
;
}
.markdown
code
{
...
...
@@ -1248,6 +1248,11 @@ a.entry-link:hover .anticon-smile {
.demos-anchor
a
{
padding-left
:
8px
;
display
:
block
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
max-width
:
90px
;
}
.demos-anchor.toc.sticky
{
...
...
@@ -1260,10 +1265,14 @@ a.entry-link:hover .anticon-smile {
.preview-image-boxes
{
float
:
right
;
margin
:
0
0
3
0px
60px
;
margin
:
0
0
11
0px
60px
;
width
:
616px
;
}
.preview-image-boxes
+
.preview-image-boxes
{
margin-top
:
-75px
;
}
.preview-image-box
{
width
:
100%
;
float
:
left
;
...
...
@@ -1314,6 +1323,12 @@ a.entry-link:hover .anticon-smile {
line-height
:
1.5
;
}
.preview-image-description
hr
{
margin
:
2px
0
;
border
:
0
;
background
:
none
;
}
.preview-image-box
img
{
cursor
:
pointer
;
max-width
:
100%
;
...
...
@@ -1389,7 +1404,9 @@ a.entry-link:hover .anticon-smile {
color
:
#000
;
opacity
:
0
;
transition
:
all
0.3s
ease
;
margin-left
:
24px
;
position
:
absolute
;
top
:
220px
;
right
:
24px
;
}
.image-modal
.slick-prev
:hover:after
{
...
...
@@ -1412,7 +1429,9 @@ a.entry-link:hover .anticon-smile {
color
:
#000
;
opacity
:
0
;
transition
:
all
0.3s
ease
;
margin-right
:
24px
;
position
:
absolute
;
top
:
220px
;
right
:
24px
;
}
.image-modal
.slick-next
:hover:after
{
...
...
site/templates/layout.html
浏览文件 @
33f2863e
...
...
@@ -64,7 +64,7 @@
<span
class=
"bar"
></span>
<ul>
<li
class=
"{%- if post.meta.filepath === 'README.md' %}current{%- endif %}"
>
<a
href=
"{{static_url('../')}}"
data-no-instant
>
首页
</a>
<a
href=
"{{static_url('../')}}"
>
首页
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/practice']) %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/practice/cases')}}"
>
实践
</a>
...
...
@@ -72,12 +72,12 @@
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/pattern']) %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/pattern/navigation')}}"
>
模式
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/spec/introduce')}}"
>
语言
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/react','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/react/introduce')}}"
>
组件
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/spec/introduce')}}"
>
语言
</a>
</li>
<li
class=
"{%- if post.directory|rootDirectoryIn(['docs/resource']) %}current{%- endif %}"
>
<a
href=
"{{static_url('../docs/resource/download')}}"
>
资源
</a>
</li>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录