diff --git a/components/tab/demo/basic.md b/components/tab/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..5e032a805c961e02b78e54dfe6a8981824d472bc --- /dev/null +++ b/components/tab/demo/basic.md @@ -0,0 +1,22 @@ +# 基本 + +- order: 0 + +最简单的用法 + +--- + +````jsx +var Tabs = antd.Tab; +var TabPane = Tabs.TabPane; + +function callback() {} + +React.render( + + + + + +, document.getElementById('components-tab-demo-basic')); +```` diff --git a/components/tab/index.md b/components/tab/index.md index 15ad4b5fc76ce23b58aaa870b822bc5ce9979071..cde5920ca3cd89f65fe7884a42803057f0d37567 100644 --- a/components/tab/index.md +++ b/components/tab/index.md @@ -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 | 无 | diff --git a/style/components/tab.less b/style/components/tab.less index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d68a4f9c7268097400c90b0e95d00e675d155f49 100644 --- a/style/components/tab.less +++ b/style/components/tab.less @@ -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; + } +}