mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-05 13:37:35 +08:00
e6076271c0
* feat(module: menu): add menuitem tooltip and submenu trigger type * add the doc
112 lines
4.2 KiB
C#
112 lines
4.2 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
@using AntDesign.Internal
|
|
|
|
@{
|
|
string prefixCls = $"{RootMenu.PrefixCls}-submenu";
|
|
}
|
|
|
|
@if (RootMenu.InternalMode == MenuMode.Inline)
|
|
{
|
|
<li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style" @ref="Ref">
|
|
<div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
|
|
@if (TitleTemplate != null)
|
|
{
|
|
@TitleTemplate
|
|
}
|
|
else if (Title != null)
|
|
{
|
|
<span>@Title</span>
|
|
}
|
|
<i class="@(prefixCls)-arrow"></i>
|
|
</div>
|
|
<ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
|
|
<CascadingValue Value="this" IsFixed="@true">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
</ul>
|
|
</li>
|
|
}
|
|
else
|
|
{
|
|
if (Placement == null)
|
|
{
|
|
Placement = (RootMenu.Mode == MenuMode.Horizontal && Parent == null) ? PlacementType.BottomLeft : PlacementType.RightTop;
|
|
}
|
|
|
|
<CascadingValue Value="this" Name="SubMenu" IsFixed="@true">
|
|
<SubMenuTrigger @ref="_overlayTrigger"
|
|
TriggerClass="@ClassMapper.Class"
|
|
Visible="IsOpen"
|
|
ComplexAutoCloseAndVisible="true"
|
|
Disabled="Disabled"
|
|
Placement="Placement"
|
|
OnVisibleChange="OnOverlayVisibleChange"
|
|
OnOverlayHiding="OnOverlayHiding"
|
|
Trigger="new[] { RootMenu?.TriggerSubMenuAction }"
|
|
PlacementCls="@($"{prefixCls}-placement-{Placement.Name} {prefixCls}-popup")"
|
|
OverlayEnterCls="@($"{prefixCls}-{RootMenu.Theme} ")"
|
|
OverlayLeaveCls="@($"{prefixCls}-{RootMenu.Theme} ")"
|
|
OverlayHiddenCls="@($"{RootMenu.PrefixCls}-hidden")">
|
|
<ChildContent>
|
|
<div class="@(prefixCls)-title" role="button">
|
|
@if (TitleTemplate != null)
|
|
{
|
|
@TitleTemplate
|
|
}
|
|
else if (Title != null)
|
|
{
|
|
<span>@Title</span>
|
|
}
|
|
@GetArrow()
|
|
</div>
|
|
</ChildContent>
|
|
<Overlay>
|
|
<ul direction="ltr" class="@(SubMenuMapper.Class)" style="@_popupMinWidthStyle" role="menu">
|
|
<CascadingValue Value="this" IsFixed="@true">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
</ul>
|
|
</Overlay>
|
|
</SubMenuTrigger>
|
|
</CascadingValue>
|
|
}
|
|
|
|
<style>
|
|
|
|
.ant-menu-vertical.ant-menu-sub,
|
|
.ant-menu-vertical.ant-menu-sub:not(.zoom-big-enter-active):not(.zoom-big-leave-active), .ant-menu-vertical-left.ant-menu-sub:not(.zoom-big-enter-active):not(.zoom-big-leave-active), .ant-menu-vertical-right.ant-menu-sub:not(.zoom-big-enter-active):not(.zoom-big-leave-active) {
|
|
overflow: initial;
|
|
}
|
|
|
|
.ant-menu.ant-menu-sub.ant-menu-vertical.ant-menu-submenu-popup {
|
|
top: 0;
|
|
left: 100%;
|
|
}
|
|
|
|
.ant-menu-submenu.ant-menu-submenu-horizontal > .ant-menu.ant-menu-sub.ant-menu-vertical.ant-menu-submenu-popup {
|
|
top: 50px;
|
|
left: initial;
|
|
min-width: 100%
|
|
}
|
|
</style>
|
|
|
|
@code
|
|
{
|
|
private RenderFragment GetArrow()
|
|
{
|
|
string prefixCls = $"{RootMenu.PrefixCls}-submenu";
|
|
if (RootMenu.PrefixCls.Contains("dropdown"))
|
|
{
|
|
return@<span class="@(prefixCls)-arrow">
|
|
<span role="img" aria-label="right" class="anticon anticon-right @(prefixCls)-arrow-icon">
|
|
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
|
|
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
|
|
</svg>
|
|
</span>
|
|
</span>;
|
|
}
|
|
|
|
return @<i class="@(prefixCls)-arrow"></i>;
|
|
}
|
|
} |