ant-design-blazor/components/menu/AntSubMenu.razor
2020-03-12 14:34:01 +08:00

60 lines
2.4 KiB
Plaintext

@namespace AntBlazor
@inherits AntSubMenuBase
<CascadingValue Value=this>
<li Ant-submenu class="@ClassMapper.Class" @ref="Ref" style="@Style" @attributes="Attributes" Id="@Id">
<div class="@TitleDivClass.Class" style="@titleStyle"
@onmouseover="()=>SetMouseEnterState(true)"
@onmouseout="()=>SetMouseEnterState(false)"
@onclick="()=> ClickSubMenuTitle()">
@if (icon != null)
{
<AntIcon type="@icon"></AntIcon>
}
<span>@((MarkupString)title)</span>
@if (Menu.isInDropDown)
{
<span class="ant-dropdown-menu-submenu-arrow">
<AntIcon type="right" class="anticon-right ant-dropdown-menu-submenu-arrow-icon"></AntIcon>
</span>
}
else
{
<i class="ant-menu-submenu-arrow"></i>
}
</div>
@if (Menu.mode == AntDirectionVHIType.inline)
{
<ul class="@menuClassName ant-menu ant-menu-inline ant-menu-sub" style="transition: height 0.5s; @submenuStyle">
@ChildContent
</ul>
}
</li>
@if (open && Menu.mode != AntDirectionVHIType.inline)
{
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div class="ant-menu-submenu ant-menu-submenu-popup @PopupClassMapper.Class"
style="left:@(element.offsetLeft+element.clientWidth+10)px; top:@(element.offsetTop)px; @(isMouseHover?"":"display: none;")"
@onmouseout="()=>SetMouseEnterState(false)"
@onmouseover="()=>SetMouseEnterState(true)"
@onmouseout:stopPropagation
@onmouseover:stopPropagation>
<ul class="@menuClassName @PopupUlClassMapper.Class ant-menu-submenu-content" style="@(isMouseHover?"":"display: none;")">
@ChildContent
</ul>
</div>
</div>
}
</CascadingValue>
@code {
string titleStyle => Menu.mode == AntDirectionVHIType.inline ?
$"padding-left:{(paddingLeft ?? Level * Menu.inlineIndent)}px" : "";
string submenuStyle => open ? "" : "height: 0px; overflow: hidden;";
}