mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-02 12:07:44 +08:00
51 lines
1.7 KiB
C#
51 lines
1.7 KiB
C#
<div class="card-container">
|
|
<Tabs Type="@TabType.Card">
|
|
<TabPane Key="1" Tab="Tab Title 1">
|
|
<p>Content of Tab Pane 1</p>
|
|
<p>Content of Tab Pane 1</p>
|
|
<p>Content of Tab Pane 1</p>
|
|
</TabPane>
|
|
<TabPane Key="2" Tab="Tab Title 2">
|
|
<p>Content of Tab Pane 2</p>
|
|
<p>Content of Tab Pane 2</p>
|
|
<p>Content of Tab Pane 2</p>
|
|
</TabPane>
|
|
<TabPane Key="3" Tab="Tab Title 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>
|
|
|
|
<style>
|
|
[data-theme='compact'] .card-container .ant-tabs-card .ant-tabs-content,
|
|
.card-container .ant-tabs-card .ant-tabs-content {
|
|
height: 120px;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container .ant-tabs-card .ant-tabs-content .ant-tabs-tabpane,
|
|
.card-container .ant-tabs-card .ant-tabs-content .ant-tabs-tabpane {
|
|
background: #fff;
|
|
padding: 16px;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container .ant-tabs-card .ant-tabs-bar,
|
|
.card-container .ant-tabs-card .ant-tabs-bar {
|
|
border-color: #fff;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container .ant-tabs-card .ant-tabs-bar .ant-tabs-tab,
|
|
.card-container .ant-tabs-card .ant-tabs-bar .ant-tabs-tab {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container .ant-tabs-card .ant-tabs-bar .ant-tabs-tab-active,
|
|
.card-container .ant-tabs-card .ant-tabs-bar .ant-tabs-tab-active {
|
|
border-color: #fff;
|
|
background: #fff;
|
|
}
|
|
</style>
|