Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
b4c2d9bf
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,发现更多精彩内容 >>
提交
b4c2d9bf
编写于
1月 09, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update toc style
上级
658660a1
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
73 addition
and
64 deletion
+73
-64
docs/pattern/navigation.md
docs/pattern/navigation.md
+22
-1
docs/practice/cases.md
docs/practice/cases.md
+17
-9
scripts/demo.js
scripts/demo.js
+2
-10
site/static/script.js
site/static/script.js
+2
-19
site/static/style.css
site/static/style.css
+27
-22
site/templates/demos.html
site/templates/demos.html
+1
-1
site/templates/home.html
site/templates/home.html
+1
-1
site/templates/page.html
site/templates/page.html
+1
-1
未找到文件。
docs/pattern/navigation.md
浏览文件 @
b4c2d9bf
...
...
@@ -13,7 +13,28 @@
## 常见导航
<img
class=
"preview-img"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png"
>
<Table
style=
"font-size:12px;float:right;width:600px;margin-left:60px;"
>
<tr>
<th></th>
<th>
侧栏导航
</th>
<th>
顶部导航
</th>
</tr>
<tr>
<th>
优点
</th>
<td>
导航的层级扩展性强;水平空间利用率高,可展示更多内容;导航可以固定,使得用户在操作和浏览时可以快速定位和切换当前位置,非常高效。
</td>
<td>
人的浏览习惯是自上而下的,便于浏览和点击;通常将内容放在固定尺寸(例如:1208px)内,整个页面排版稳定,不受用户终端显示器影响。
</td>
</tr>
<tr>
<th>
缺点
</th>
<td>
内容区域一般放置在栅格上,所以排版受用户终端显示器影响大。
</td>
<td>
目前显示器多为宽屏,顶部导航对垂直空间占用率大,而对水平空间利用率低;由于中英文都是横向书写,顶部导航会限制导航类目的数量和长度。
</td>
</tr>
<tr>
<th>
总结
</th>
<td>
一般适用在浏览性强、门户性质的网站,以及一些比较前台化的应用。
</td>
<td>
适用在操作性强、中后台管理性质的应用。
</td>
</tr>
</Table>
我们将常见的导航模式分为:侧栏导航和顶部导航,两者各有优缺点,设计者可以根据各自的业务需求进行选择。
...
...
docs/practice/cases.md
浏览文件 @
b4c2d9bf
...
...
@@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。
### 金融云
<img
as-cover
class=
"preview-img"
width=
"420"
al
t=
"图例1"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG
.png"
>
<img
class=
"preview-img"
width=
"420"
al
t=
"图例2"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG
.png"
>
<img
class=
"preview-img"
width=
"420"
al
t=
"图例3"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG
.png"
>
<img
as-cover
class=
"preview-img"
width=
"420"
al
ign=
"right"
src=
"https://os.alipayobjects.com/rmsportal/MKspFSBnDPrmqnz
.png"
>
<img
class=
"preview-img"
width=
"420"
al
ign=
"right"
src=
"https://os.alipayobjects.com/rmsportal/ssKQluRCiuOFMFH
.png"
>
<img
class=
"preview-img"
width=
"420"
al
ign=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OhdrPCvCabsVUuQ
.png"
>
是面向金融机构深度定制的行业云计算服务;助力金融机构向新金融转型升级,推动平台、数据和技术方面的能力全面对外开放。
...
...
@@ -27,7 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。
### OceanBase Cloud Platform
<img
class=
"preview-img"
width=
"420"
alt=
"图例3"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png"
>
<img
as-cover
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/zarxEZDIRYfwFKB.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/xqcXkzAxbApmjKC.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/LBNAgCWuXcOkmSM.png"
>
OceanBase是 一款真正意义上的云端分布式关系型数据库,而 OceanBase Cloud Platform(云平台)是以 OceanBase 数据库为基础的云服务,可以帮助用户快速创建、使用 OB 服务。
...
...
@@ -35,7 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库,而 Oce
### 服务宝体验平台
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/qmnuCdZGZFXrcRP.png"
>
<img
as-cover
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/UAZCIqsrVgtLhKP.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/graXLoQUgPXcVDv.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/CZXDKssYFNYZgeb.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/IhPfMRswdRzfmOr.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/uQOssWBwFGyWEbZ.png"
>
体验平台是将用户与公司所有的接触点包括来电咨询/微博等渠道数据,通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队/产品经理,推动体验问题解决,实现良性运转流。
...
...
@@ -43,18 +49,20 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库,而 Oce
### AntV
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/lOFDPejqANtHXmj.png"
>
<img
as-cover
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/anuTfymhGNvBBsU.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/STnKKwGLsmhdpHB.png"
>
<img
class=
"preview-img"
width=
"420"
align=
"right"
src=
"https://os.alipayobjects.com/rmsportal/dIWogehNYmeAamw.png"
>
AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来,并用分享给所有需要数据可视理论的人。
<style>
.markdown hr {
width: 112%;
}
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
}
.toc {
display: none;
}
</style>
scripts/demo.js
浏览文件 @
b4c2d9bf
...
...
@@ -145,14 +145,6 @@ window.BrowserDemo = React.createClass({
}
});
/*
<Carousel>
<div><img src={this.props.src} /></div>
<div><img src={this.props.src} /></div>
<div><img src={this.props.src} /></div>
</Carousel>
*/
const
{
Modal
,
Carousel
}
=
antd
;
const
PriviewImg
=
React
.
createClass
({
getInitialState
()
{
...
...
@@ -190,7 +182,7 @@ const PriviewImg = React.createClass({
<
div
className
=
"
preview-image-title
"
>
{
this
.
props
.
alt
}
<
/div
>
<
div
className
=
"
preview-image-description
"
>
{
this
.
props
.
description
}
<
/div
>
<
Modal
className
=
"
image-modal
"
width
=
"
840
"
visible
=
{
this
.
state
.
visible
}
onCancel
=
{
this
.
handleCancel
}
footer
=
""
title
=
""
>
<
Carousel
afterChange
=
{
this
.
handleImgChange
}
>
<
Carousel
afterChange
=
{
this
.
handleImgChange
}
adaptiveHeight
>
{
imgsPack
.
map
((
img
,
i
)
=>
<
div
key
=
{
i
}
>
...
...
@@ -240,7 +232,7 @@ InstantClickChangeFns.push(function() {
}
// 计算宽度
let
width
=
'
auto
'
;
let
width
=
''
;
if
(
priviewImgs
.
length
===
1
)
{
width
=
priviewImgNodes
[
0
].
getAttribute
(
'
width
'
)
||
''
;
}
else
if
(
coverImg
)
{
...
...
site/static/script.js
浏览文件 @
b4c2d9bf
...
...
@@ -58,27 +58,11 @@ InstantClickChangeFns.push(function() {
$
(
'
.markdown #api
'
).
nextAll
().
andSelf
().
appendTo
(
'
.api-container
'
);
// 滚动时固定锚点、高亮当前项
if
(
$
(
'
.toc
'
)[
0
])
{
var
titles
=
$
(
'
.markdown :header:not(h1)
'
);
if
(
$
(
'
.demos-anchor
'
)[
0
])
{
var
doc
=
$
(
document
);
var
tocTop
=
$
(
'
.toc
'
).
offset
().
top
;
function
onScroll
()
{
var
top
=
doc
.
scrollTop
(),
i
;
if
(
top
>=
doc
.
height
()
-
$
(
window
).
height
()
-
20
)
{
i
=
titles
.
length
-
1
;
}
else
{
for
(
i
=
0
;
i
<
titles
.
length
;
i
++
)
{
if
(
top
<
titles
.
eq
(
i
).
offset
().
top
-
20
)
{
break
;
}
}
i
--
;
i
=
(
i
<
0
)
?
0
:
i
;
i
=
(
i
>
titles
.
length
-
1
)
?
(
titles
.
length
-
1
)
:
i
;
}
$
(
'
.anchor a
'
).
removeClass
(
'
current
'
);
$
(
'
.anchor a
'
).
eq
(
i
).
addClass
(
'
current
'
);
var
top
=
doc
.
scrollTop
();
if
(
top
>=
tocTop
)
{
$
(
'
.toc
'
).
addClass
(
'
sticky
'
);
}
else
{
...
...
@@ -86,7 +70,6 @@ InstantClickChangeFns.push(function() {
}
}
onScroll
();
// 滚动高亮
$
(
window
).
off
(
'
scroll
'
);
$
(
window
).
on
(
'
scroll
'
,
onScroll
);
}
...
...
site/static/style.css
浏览文件 @
b4c2d9bf
...
...
@@ -491,7 +491,6 @@ footer ul li > a {
color
:
#666
;
font-size
:
14px
;
line-height
:
1.8
;
width
:
80%
;
}
.highlight
{
...
...
@@ -541,6 +540,14 @@ footer ul li > a {
margin
:
1em
0
;
}
.markdown
>
p
,
.markdown
>
blockquote
,
.markdown
>
.highlight
,
.markdown
>
ol
,
.markdown
>
ul
{
width
:
80%
;
}
.markdown
>
ul
li
,
.markdown
blockquote
ul
>
li
{
list-style
:
circle
;
...
...
@@ -613,7 +620,6 @@ footer ul li > a {
border-left
:
4px
solid
#e9e9e9
;
padding-left
:
0.8em
;
margin
:
1em
0
;
overflow
:
hidden
;
}
.markdown
blockquote
p
{
...
...
@@ -688,37 +694,28 @@ footer ul li > a {
}
.toc
{
position
:
absolute
;
font-size
:
12px
;
background
:
#fff
;
padding-top
:
12px
;
right
:
24px
;
overflow
:
hidden
;
}
.toc.sticky
{
position
:
fixed
;
top
:
0
;
right
:
4%
;
margin-right
:
24px
;
z-index
:
100
;
font-size
:
14px
;
margin-bottom
:
20px
;
background
:
#fbfbfb
;
padding
:
8px
0
;
border-left
:
2px
solid
#eee
;
}
.toc
li
>
ul
{
text-indent
:
8px
;
font-size
:
12px
;
display
:
none
;
}
.toc
a
{
padding-left
:
8
px
;
padding-left
:
16
px
;
border-left
:
2px
solid
#eee
;
margin-left
:
-2px
;
display
:
block
;
transition
:
all
0.3s
ease
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
max-width
:
90px
;
line-height
:
20px
;
color
:
#999
;
color
:
#666
;
}
.toc
a
:hover
{
...
...
@@ -1246,9 +1243,17 @@ a.entry-link:hover .anticon-smile {
font-size
:
12px
;
}
.demos-anchor.toc.sticky
{
position
:
fixed
;
top
:
0
;
right
:
4%
;
margin-right
:
24px
;
z-index
:
100
;
}
.preview-image-boxes
{
float
:
right
;
margin
:
0
-14%
30px
60px
;
margin
:
0
0
30px
60px
;
width
:
600px
;
overflow
:
hidden
;
}
...
...
site/templates/demos.html
浏览文件 @
b4c2d9bf
...
...
@@ -33,7 +33,7 @@
</div>
{%- endif %}
</div>
<ul
class=
"toc demos-anchor
anchor
"
>
<ul
class=
"toc demos-anchor"
>
{%- for item in items %}
{%- set post = item.meta.filepath|parsePost %}
<li>
...
...
site/templates/home.html
浏览文件 @
b4c2d9bf
...
...
@@ -61,7 +61,7 @@
.banner-text-wrapper
{
position
:
absolute
;
left
:
10%
;
top
:
6
0%
;
bottom
:
2
0%
;
color
:
#fff
;
text-align
:
right
;
}
...
...
site/templates/page.html
浏览文件 @
b4c2d9bf
...
...
@@ -16,9 +16,9 @@
{% block content %}
<section
class=
"main-container"
>
<div
class=
"toc anchor"
>
{{ post.toc }}
</div>
<article
class=
"markdown"
>
<h1>
{{ post.title }} {{ post.meta.chinese }}
</h1>
<div
class=
"toc"
>
{{ post.toc }}
</div>
{{ post.html|add_anchor }}
</article>
</section>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录