Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
1d7c3af0
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,体验更适合开发者的 AI 搜索 >>
提交
1d7c3af0
编写于
6月 10, 2015
作者:
Y
yiminghe
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update tab
上级
ce6ee800
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
30 addition
and
21 deletion
+30
-21
components/tab/index.md
components/tab/index.md
+1
-1
package.json
package.json
+1
-1
style/components/tab.less
style/components/tab.less
+28
-19
未找到文件。
components/tab/index.md
浏览文件 @
1d7c3af0
...
...
@@ -14,7 +14,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|------------|
| activeKey | 当前激活 tab 面板的 key | String | 无 |
|
effect | 是否启用面板切换动画 | Boolean | true
|
|
animation | 是否启用面板切换动画 | String | 空。目前只支持 slide-horizontal
|
| defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | String | 第一个面板 |
| onChange | 切换面板的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
...
...
package.json
浏览文件 @
1d7c3af0
...
...
@@ -20,7 +20,7 @@
"
rc-menu
"
:
"
~3.3.0
"
,
"
rc-progress
"
:
"
~1.0.0
"
,
"
rc-select
"
:
"
~3.3.2
"
,
"
rc-tabs
"
:
"
~5.
0.5
"
,
"
rc-tabs
"
:
"
~5.
1.0
"
,
"
rc-tooltip
"
:
"
~2.0.1
"
},
"devDependencies"
:
{
...
...
style/components/tab.less
浏览文件 @
1d7c3af0
// index.less
@prefixClass: rc-tabs;
@easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
@effect-duration: .
5
s;
@effect-duration: .
3
s;
.@{prefixClass} {
outline: none;
box-sizing: border-box;
border-bottom: 2px solid #f3f3f3;
position: relative;
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1429685559_5814753.eot');
/* IE9*/
src: url('//at.alicdn.com/t/font_1429685559_5814753.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1429685559_5814753.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1429685559_5814753.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1429685559_5814753.svg#iconfont') format('svg');
/* iOS 4.1- */
}
&-ink-bar {
z-index: 1;
position: absolute;
left: 0;
bottom:
-2px
;
bottom:
0
;
box-sizing: border-box;
height: 3px;
height: 4px;
margin-top: -3px;
background-color: #3fc7fa;
transform: scaleX(1);
transform-origin: 0 0;
&-transition-
right
{
&-transition-
forward
{
transition: right 0.3s @easing-in-out,
left 0.3s @easing-in-out 0.3s * 0.3;
}
&-transition-
left
{
&-transition-
backward
{
transition: right 0.3s @easing-in-out 0.3s * 0.3,
left 0.3s @easing-in-out;
}
...
...
@@ -40,6 +49,7 @@
white-space: nowrap;
padding-left: 32px;
padding-right: 32px;
border-bottom: 2px solid #f3f3f3;
}
&-tab-prev, &-tab-next {
...
...
@@ -66,7 +76,7 @@
text-align: center;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0
px
;
-webkit-text-stroke-width: 0;
-moz-osx-font-smoothing: grayscale;
font-family: sans-serif;
...
...
@@ -112,7 +122,6 @@
margin: 0;
list-style: none;
display: inline-block;
border-bottom: 2px solid #e9e9e9;
&:before, &:after {
display: table;
...
...
@@ -149,9 +158,9 @@
> a {
transition: color 0.3s @easing-in-out;
margin-bottom: 4px;
font-weight: 500;
display: inline-block;
color: #999;
}
> a:hover {
...
...
@@ -175,17 +184,17 @@
overflow: hidden;
}
&-
effect-left
-enter {
&-
slide-horizontal-backward
-enter {
transform: translateX(-100%);
}
&-
effect-left-enter&-effect-left
-enter-active {
&-
slide-horizontal-backward-enter&-slide-horizontal-backward
-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
}
&-
effect-left
-leave {
&-
slide-horizontal-backward
-leave {
position: absolute;
top: 0;
left: 0;
...
...
@@ -194,21 +203,21 @@
transform: translateX(0);
}
&-
effect-left-leave&-effect-left
-leave-active {
&-
slide-horizontal-backward-leave&-slide-horizontal-backward
-leave-active {
transform: translateX(100%);
transition: transform @effect-duration @easing-in-out;
}
&-
effect-right
-enter {
&-
slide-horizontal-forward
-enter {
transform: translateX(100%);
}
&-
effect-right-enter&-effect-right
-enter-active {
&-
slide-horizontal-forward-enter&-slide-horizontal-forward
-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
}
&-
effect-right
-leave {
&-
slide-horizontal-forward
-leave {
position: absolute;
transform: translateX(0);
top: 0;
...
...
@@ -217,8 +226,8 @@
bottom: 0;
}
&-
effect-right-leave&-effect-right
-leave-active {
&-
slide-horizontal-forward-leave&-slide-horizontal-forward
-leave-active {
transform: translateX(-100%);
transition: transform @effect-duration @easing-in-out;
}
}
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录