偏右
10 years ago
3 changed files with 261 additions and 20 deletions
@ -0,0 +1,22 @@ |
|||
# 基本 |
|||
|
|||
- order: 0 |
|||
|
|||
最简单的用法 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Tabs = antd.Tab; |
|||
var TabPane = Tabs.TabPane; |
|||
|
|||
function callback() {} |
|||
|
|||
React.render( |
|||
<Tabs defaultActiveKey="2" onChange={callback}> |
|||
<TabPane tab='tab 1' key="1"></TabPane> |
|||
<TabPane tab='tab 2' key="2"></TabPane> |
|||
<TabPane tab='tab 3' key="3"></TabPane> |
|||
</Tabs> |
|||
, document.getElementById('components-tab-demo-basic')); |
|||
```` |
|||
@ -0,0 +1,224 @@ |
|||
// index.less |
|||
|
|||
@prefixClass: rc-tabs; |
|||
@easing-in-out: cubic-bezier(0.35, 0, 0.25, 1); |
|||
|
|||
@effect-duration: .5s; |
|||
|
|||
.@{prefixClass} { |
|||
outline: none; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
|
|||
&-ink-bar { |
|||
z-index: 1; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -2px; |
|||
box-sizing: border-box; |
|||
height: 3px; |
|||
background-color: #3fc7fa; |
|||
transform: scaleX(1); |
|||
transform-origin: 0 0; |
|||
&-transition-right { |
|||
transition: right 0.3s @easing-in-out, |
|||
left 0.3s @easing-in-out 0.3s * 0.3; |
|||
} |
|||
&-transition-left { |
|||
transition: right 0.3s @easing-in-out 0.3s * 0.3, |
|||
left 0.3s @easing-in-out; |
|||
} |
|||
} |
|||
|
|||
&-nav-container { |
|||
font-size: 14px; |
|||
line-height: 1.5; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
position: relative; |
|||
white-space: nowrap; |
|||
padding-left: 32px; |
|||
padding-right: 32px; |
|||
} |
|||
|
|||
&-tab-prev, &-tab-next { |
|||
user-select: none; |
|||
-webkit-user-select: none; |
|||
z-index: 1; |
|||
margin-right: -2px; |
|||
width: 32px; |
|||
height: 100%; |
|||
line-height: 36px; |
|||
cursor: pointer; |
|||
border: none; |
|||
background-color: transparent; |
|||
position: absolute; |
|||
|
|||
&-icon { |
|||
position: relative; |
|||
display: inline-block; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
line-height: inherit; |
|||
vertical-align: baseline; |
|||
text-align: center; |
|||
text-transform: none; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-stroke-width: 0px; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
font-family: sans-serif; |
|||
|
|||
&:before { |
|||
display: block; |
|||
font-family: "iconfont" !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-tab-next { |
|||
right: 2px; |
|||
|
|||
&-icon:before { |
|||
content: "\e651"; |
|||
} |
|||
} |
|||
|
|||
&-tab-prev { |
|||
left: 0; |
|||
transform: rotate(180deg); |
|||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); |
|||
&-icon:before { |
|||
content: "\e651"; |
|||
} |
|||
} |
|||
|
|||
&-nav-wrap { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&-nav-scroll { |
|||
width:99999px; |
|||
} |
|||
|
|||
&-nav { |
|||
height: 36px; |
|||
box-sizing: border-box; |
|||
padding-left: 0; |
|||
transition: left 0.5s @easing-in-out; |
|||
position: relative; |
|||
margin: 0; |
|||
list-style: none; |
|||
display: inline-block; |
|||
border-bottom: 2px solid #e9e9e9; |
|||
|
|||
&:before, &:after { |
|||
display: table; |
|||
content: " "; |
|||
} |
|||
|
|||
&:after { |
|||
clear: both; |
|||
} |
|||
|
|||
div.@{prefixClass}-tab-active { |
|||
|
|||
> a, > a:hover, > a:focus { |
|||
color: #3fc7fa; |
|||
cursor: default; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
|
|||
div.@{prefixClass}-tab-disabled { |
|||
pointer-events: none; |
|||
cursor: default; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.@{prefixClass}-tab { |
|||
float: left; |
|||
height: 100%; |
|||
padding: 10px 20px; |
|||
margin-right: 30px; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
display: block; |
|||
|
|||
> a { |
|||
transition: color 0.3s @easing-in-out; |
|||
font-weight: 500; |
|||
display: inline-block; |
|||
color: #999; |
|||
} |
|||
|
|||
> a:hover { |
|||
color: #23c0fa; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
> a:hover, > a:focus { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-tabpane-hidden { |
|||
display: none; |
|||
} |
|||
|
|||
&-content { |
|||
position: relative; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&-effect-left-enter { |
|||
transform: translateX(-100%); |
|||
|
|||
} |
|||
|
|||
&-effect-left-enter&-effect-left-enter-active { |
|||
transform: translateX(0); |
|||
transition: transform @effect-duration @easing-in-out; |
|||
} |
|||
|
|||
&-effect-left-leave { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
&-effect-left-leave&-effect-left-leave-active { |
|||
transform: translateX(100%); |
|||
transition: transform @effect-duration @easing-in-out; |
|||
} |
|||
|
|||
&-effect-right-enter { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
&-effect-right-enter&-effect-right-enter-active { |
|||
transform: translateX(0); |
|||
transition: transform @effect-duration @easing-in-out; |
|||
} |
|||
|
|||
&-effect-right-leave { |
|||
position: absolute; |
|||
transform: translateX(0); |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
&-effect-right-leave&-effect-right-leave-active { |
|||
transform: translateX(-100%); |
|||
transition: transform @effect-duration @easing-in-out; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue