Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
bd5311c9
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,发现更多精彩内容 >>
提交
bd5311c9
编写于
6月 24, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update back-top doc
上级
2007b217
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
18 addition
and
15 deletion
+18
-15
components/back-top/demo/basic.md
components/back-top/demo/basic.md
+5
-2
components/back-top/demo/custom.md
components/back-top/demo/custom.md
+9
-9
components/back-top/index.md
components/back-top/index.md
+4
-4
未找到文件。
components/back-top/demo/basic.md
浏览文件 @
bd5311c9
...
...
@@ -3,12 +3,15 @@ order: 0
title
:
基本
---
最简单的用法
,demo 见右下角灰色按钮
。
最简单的用法。
````
jsx
import
{
BackTop
}
from
'
antd
'
;
ReactDOM
.
render
(
<
BackTop
/>
<
div
>
<
BackTop
/>
向下滚动后,见右下角灰色按钮
</
div
>
,
mountNode
);
````
components/back-top/demo/custom.md
浏览文件 @
bd5311c9
...
...
@@ -3,7 +3,7 @@ order: 1
title
:
自定义样式
---
可以自定义置顶按钮的样式,限制宽高
: 40px
*
40px。(右下角蓝色按钮)
可以自定义置顶按钮的样式,限制宽高
:
`40px * 40px`
。
````
jsx
import
{
BackTop
}
from
'
antd
'
;
...
...
@@ -11,20 +11,20 @@ import { BackTop } from 'antd';
const
style
=
{
height
:
40
,
width
:
40
,
borderRadius
:
3
,
lineHeight
:
'
40px
'
,
borderRadius
:
4
,
backgroundColor
:
'
#57c5f7
'
,
color
:
'
#fff
'
,
textAlign
:
'
center
'
,
fontSize
:
20
,
};
const
onClick
=
(
e
)
=>
{
console
.
log
(
e
);
};
ReactDOM
.
render
(
<
BackTop
onClick
=
{
onClick
}
style
=
{
{
bottom
:
100
}
}
>
<
div
style
=
{
style
}
>
UP
</
div
>
</
BackTop
>
<
div
>
<
BackTop
style
=
{
{
bottom
:
100
}
}
>
<
div
style
=
{
style
}
>
UP
</
div
>
</
BackTop
>
向下滚动后,见右下角蓝色按钮
</
div
>
,
mountNode
);
````
components/back-top/index.md
浏览文件 @
bd5311c9
...
...
@@ -5,17 +5,17 @@ type: Other
english
:
BackTop
---
使用
`BackTop`
可以方便地回到
顶部。
使用
置顶组件可以方便地回到页面
顶部。
## 何时使用
当内容区域比较长,需要提供快速回到顶部的功能时。
-
当页面内容区域比较长时;
-
当用户需要频繁返回顶部查看相关内容时。
## API
> 有默认样式,距离底部 `50px`,可覆盖。
> 自定义样式宽高有限制,不大于 40px * 40px。
> 自定义样式宽高不大于 40px * 40px。
| 参数 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录