test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-15 09:21:24 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
035e418072
ant-design-blazor/components/tabs/AntTabs.razor

180 lines
10 KiB
Plaintext
Raw Normal View History

feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
@namespace AntBlazor
feat: add component tabs (#67) * fix autosize * feat(module: tabs): add AntTabs * chore(module:input): code improvement * implement tab * implement disable tab * implement scroll tabs * resume tabs demo page * implement tabs prev/next calcaultion logic * update nav bar render logic * feat (module: tabs): implement rerender logic * feat:(module: tabs): update render logic * feat: (module: tabs): implement extra content * feat(module: tabs): add panes dynamically * feat(module: tabs): implement add tabs dynamically * feat(module: tabs): implement remove tabs * feat(module: tabs): Customized trigger of new tab * fix(module: tabs): stop event propagation * fix (module: tabs): close icon disappea
2020-04-16 12:05:59 +08:00
@inherits AntDomComponentBase
<CascadingValue Value="this">
@ChildContent
</CascadingValue>
<div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" id="@Id">
<!---->
@if (TabBarExtraContent != null)
{
<div class="ant-tabs-extra-content" style="float: right;">
@TabBarExtraContent
</div>
}
@if (TabPosition != AntTabPosition.Bottom)
{
<!--Tab bar-->
<div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
<div class="@_navClassMapper.Class">
<span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
<span class="ant-tabs-tab-prev-icon">
<AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
</span>
</span>
<span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
<span class="ant-tabs-tab-next-icon">
<AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
</span>
</span>
<div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
<div class="ant-tabs-nav-scroll">
<div class="ant-tabs-nav ant-tabs-nav-animated" style="@_navStyle">
<div @ref="_tabBars">
@foreach (var pane in Panes)
{
if (pane.IsActive)
{
feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
<div @ref="_activeTabBar" tabindex="0" class="@pane.ClassMapper.Class" id="tab-@pane.Key" role="tab"
aria-disabled="@pane.Disabled" aria-selected="true" aria-controls="tabpane-@pane.Key"
draggable="@Draggable.ToString()"
@ondragover:preventDefault
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(e, pane)">
feat: add component tabs (#67) * fix autosize * feat(module: tabs): add AntTabs * chore(module:input): code improvement * implement tab * implement disable tab * implement scroll tabs * resume tabs demo page * implement tabs prev/next calcaultion logic * update nav bar render logic * feat (module: tabs): implement rerender logic * feat:(module: tabs): update render logic * feat: (module: tabs): implement extra content * feat(module: tabs): add panes dynamically * feat(module: tabs): implement add tabs dynamically * feat(module: tabs): implement remove tabs * feat(module: tabs): Customized trigger of new tab * fix(module: tabs): stop event propagation * fix (module: tabs): close icon disappea
2020-04-16 12:05:59 +08:00
@if (Type == AntTabType.EditableCard && pane.Closable)
{
<div>
@pane.Tab
<AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
</div>
}
else
{
@pane.Tab
}
</div>
}
else
{
feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
<div tabindex="-1" class="ant-tabs-tab" id="tab-@pane.Key" role="tab"
aria-disabled="@pane.Disabled" aria-selected="false" aria-controls="tabpane-@pane.Key"
@onclick="(e)=>ActivatePane(pane)" @onclick:stopPropagation
draggable="@Draggable.ToString()"
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(e, pane)">
feat: add component tabs (#67) * fix autosize * feat(module: tabs): add AntTabs * chore(module:input): code improvement * implement tab * implement disable tab * implement scroll tabs * resume tabs demo page * implement tabs prev/next calcaultion logic * update nav bar render logic * feat (module: tabs): implement rerender logic * feat:(module: tabs): update render logic * feat: (module: tabs): implement extra content * feat(module: tabs): add panes dynamically * feat(module: tabs): implement add tabs dynamically * feat(module: tabs): implement remove tabs * feat(module: tabs): Customized trigger of new tab * fix(module: tabs): stop event propagation * fix (module: tabs): close icon disappea
2020-04-16 12:05:59 +08:00
@if (Type == AntTabType.EditableCard && pane.Closable)
{
<div>
@pane.Tab
<AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
</div>
}
else
{
@pane.Tab
}
</div>
}
}
</div>
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="@_inkStyle"></div>
</div>
</div>
</div>
</div>
</div>
}
<!--Tab content-->
<div class="ant-tabs-content ant-tabs-@TabPosition-content ant-tabs-@Type-content ant-tabs-content-animated" style="@_contentStyle">
@foreach (var pane in Panes)
{
@if (pane.IsActive)
{
<div role="tabpanel" aria-hidden="false" tabindex="0" class="ant-tabs-tabpane ant-tabs-tabpane-active" style="visibility: visible;">@pane.ChildContent</div>
}
else
{
<div role="tabpanel" aria-hidden="true" tabindex="-1" class="ant-tabs-tabpane ant-tabs-tabpane-inactive" style="visibility: hidden;">@pane.ChildContent</div>
}
}
</div>
@if (TabPosition == AntTabPosition.Bottom)
{
<!--Tab bar-->
<div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
<div class="@_navClassMapper.Class">
<span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
<span class="ant-tabs-tab-prev-icon">
<AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
</span>
</span>
<span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
<span class="ant-tabs-tab-next-icon">
<AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
</span>
</span>
<div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
<div class="ant-tabs-nav-scroll">
<div class="ant-tabs-nav ant-tabs-nav-animated" style="@_navStyle">
<div @ref="_tabBars">
@foreach (var pane in Panes)
{
if (pane.IsActive)
{
feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
<div @ref="_activeTabBar" tabindex="0" class="@pane.ClassMapper.Class" id="tab-@pane.Key" role="tab"
aria-disabled="@pane.Disabled" aria-selected="true" aria-controls="tabpane-@pane.Key"
draggable="@Draggable.ToString()"
@ondragover:preventDefault
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(e, pane)">
feat: add component tabs (#67) * fix autosize * feat(module: tabs): add AntTabs * chore(module:input): code improvement * implement tab * implement disable tab * implement scroll tabs * resume tabs demo page * implement tabs prev/next calcaultion logic * update nav bar render logic * feat (module: tabs): implement rerender logic * feat:(module: tabs): update render logic * feat: (module: tabs): implement extra content * feat(module: tabs): add panes dynamically * feat(module: tabs): implement add tabs dynamically * feat(module: tabs): implement remove tabs * feat(module: tabs): Customized trigger of new tab * fix(module: tabs): stop event propagation * fix (module: tabs): close icon disappea
2020-04-16 12:05:59 +08:00
@if (Type == AntTabType.EditableCard && pane.Closable)
{
<div>
@pane.Tab
<AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
</div>
}
else
{
@pane.Tab
}
</div>
}
else
{
feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
<div tabindex="-1" class="ant-tabs-tab" id="tab-@pane.Key" role="tab"
aria-disabled="@pane.Disabled" aria-selected="false" aria-controls="tabpane-@pane.Key"
@onclick="(e)=>ActivatePane(pane)" @onclick:stopPropagation
draggable="@Draggable.ToString()"
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(e, pane)">
feat: add component tabs (#67) * fix autosize * feat(module: tabs): add AntTabs * chore(module:input): code improvement * implement tab * implement disable tab * implement scroll tabs * resume tabs demo page * implement tabs prev/next calcaultion logic * update nav bar render logic * feat (module: tabs): implement rerender logic * feat:(module: tabs): update render logic * feat: (module: tabs): implement extra content * feat(module: tabs): add panes dynamically * feat(module: tabs): implement add tabs dynamically * feat(module: tabs): implement remove tabs * feat(module: tabs): Customized trigger of new tab * fix(module: tabs): stop event propagation * fix (module: tabs): close icon disappea
2020-04-16 12:05:59 +08:00
@if (Type == AntTabType.EditableCard && pane.Closable)
{
<div>
@pane.Tab
<AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
</div>
}
else
{
@pane.Tab
}
</div>
}
}
</div>
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="@_inkStyle"></div>
</div>
</div>
</div>
</div>
</div>
}
feat (module: tabs): implement drag & drop (#76)
2020-04-16 20:53:03 +08:00
</div>
Reference in New Issue Copy Permalink