test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity
cc12109d46
ant-design/components/tabs/demo/card-top.md
二货机器人 77c5adbe4d
feat: New Tabs (#24552) 
* init style

* support size

* editable

* add shadow

* update demo

* fix nest style

* update rtl

* update snapshot

* bump

* fix hover

* fix test case

* fix style lint

* clean up

* updat docs

* add onTabScroll

* upgrade rc-dropdown

* update snapshot

* clean snapshot

* clean up

Co-authored-by: afc163 <afc163@gmail.com>
2020-05-30 18:28:25 +08:00

2.1 KiB
Raw Blame History

order title
10
zh-CN en-US
卡片式页签容器 Container of card type Tab

zh-CN

用于容器顶部，需要一点额外的样式覆盖。

en-US

Should be used at the top of container, needs to override styles.

import { Tabs } from 'antd';

const { TabPane } = Tabs;

ReactDOM.render(
  <div className="card-container">
    <Tabs type="card">
      <TabPane tab="Tab Title 1" key="1">
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
      </TabPane>
      <TabPane tab="Tab Title 2" key="2">
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
      </TabPane>
      <TabPane tab="Tab Title 3" key="3">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </TabPane>
    </Tabs>
  </div>,
  mountNode,
);

.card-container p {
  margin: 0;
}
.card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
  display: none;
}
.card-container > .ant-tabs-card .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}