mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-03 12:37:40 +08:00
5875929a89
* refactor(module: tabs): improve rendering * fix ForceRender & change constants to enums * fix animated * fix left extra content * add Centered feature * fix scroll distance * fix scroll gap * fix index out of range * fix tests * fix scroll distance * fix dropdown button position * fix ping left & right * hide the dropdown button
53 lines
1.2 KiB
C#
53 lines
1.2 KiB
C#
<Tabs>
|
|
<TabBarExtraContent>
|
|
<Button>Extra Action</Button>
|
|
</TabBarExtraContent>
|
|
<ChildContent>
|
|
<TabPane Key="1" Tab="Tab 1">
|
|
Content of Tab Pane 1
|
|
</TabPane>
|
|
<TabPane Key="2" Tab="Tab 2">
|
|
Content of Tab Pane 2
|
|
</TabPane>
|
|
<TabPane Key="3" Tab="Tab 3">
|
|
Content of Tab Pane 3
|
|
</TabPane>
|
|
</ChildContent>
|
|
</Tabs>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<div>You can also specify its direction or both side</div>
|
|
<Divider />
|
|
<CheckboxGroup Options=@(new[]{"left","right"}) @bind-Value="position" />
|
|
<br />
|
|
<br />
|
|
<Tabs TabBarExtraContentLeft="leftExtra" TabBarExtraContentRight="rightExtra" >
|
|
<TabPane Tab="Tab 1" Key="1">
|
|
Content of tab 1
|
|
</TabPane>
|
|
<TabPane Tab="Tab 2" Key="2">
|
|
Content of tab 2
|
|
</TabPane>
|
|
<TabPane Tab="Tab 3" Key="3">
|
|
Content of tab 3
|
|
</TabPane>
|
|
</Tabs>
|
|
|
|
@code {
|
|
string[] position =new[] { "left", "right" };
|
|
|
|
RenderFragment leftExtra => position.Contains("left")? @<Button class="tabs-extra-demo-button">Left Extra Action</Button> :null;
|
|
RenderFragment rightExtra => position.Contains("right")? @<Button>Right Extra Action</Button> :null;
|
|
}
|
|
|
|
<style>
|
|
.tabs-extra-demo-button {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.ant-row-rtl .tabs-extra-demo-button {
|
|
margin-right: 0;
|
|
margin-left: 16px;
|
|
}
|
|
</style> |