mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
偏右
commit
4a56a4758c
22
components/tab/demo/basic.md
Normal file
22
components/tab/demo/basic.md
Normal file
@ -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'));
|
||||
````
|
||||
@ -5,29 +5,24 @@
|
||||
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
选项卡切换组件。
|
||||
|
||||
当你再次和我说起 青春时的故事
|
||||
我正在下着雨的无锡 乞讨着生活的权利
|
||||
前一天早晨 我睁开眼已是江南
|
||||
他们说柔软的地方 总会发生柔软的事
|
||||
那年的舞台上 说谎的人一直歌唱
|
||||
大不列颠的广场上 有没有鸽子飞翔
|
||||
青春和瞎子一起 变成了哑巴
|
||||
今天扯平了我们的当年 分食了理想
|
||||
## API
|
||||
|
||||
### Tabs
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|----------------------------------------------|----------|------------|
|
||||
| activeKey | 当前激活 tab 面板的 key | String | 无 |
|
||||
| effect | 是否启用面板切换动画 | Boolean | true |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String | 第一个面板 |
|
||||
| onChange | 切换面板的回调 | Function | 无 |
|
||||
| onTabClick | tab 被点击的回调 | Function | 无 |
|
||||
|
||||
|
||||
## 为什么使用
|
||||
|
||||
你可知道你的名字解释了我的一生
|
||||
碎了满天的往事如烟 与世无争
|
||||
当你装满行李 回到故乡
|
||||
我的余生 却再也没有北方
|
||||
|
||||
有一天我又梦见 那个装满乐器的教室
|
||||
你还站在门口 一脸羞涩的表情
|
||||
你说这么多年你还没找到 让你心动的男人
|
||||
我说去他妈的爱情 都是过眼云烟的东西
|
||||
|
||||
我的余生 都用来寻找北方
|
||||
### TabPane
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|---------------------|--------|--------|
|
||||
| key | 对应 activeKey | Object | 无 |
|
||||
| tab | 当前 tab 对应的面板 | String | 无 |
|
||||
|
||||
@ -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
Block a user