@page "/menus"
@inject IOptions<WebsiteOptions> WebsiteOption

<h3>Menu 导航菜单</h3>

<h4>为页面和功能提供导航的菜单列表。</h4>

<Tips class="mt-3">
    <p><code>Menu</code> 组件一般用法为菜单导航，即点击菜单后地址栏进行重定向导航，但是在实战中有时候不需要导航，通过设置 <code>OnClick</code> 回调委托，自定义处理逻辑，此时通过设置属性 <code>DisableNavigation</code> 即可，本例中由于都是模拟菜单点击并未真正的进行地址栏跳转导航所以所有 <code>Menu</code> 均设置为 <code>true</code> 禁止导航</p>
</Tips>

<Block Title="顶栏" Introduction="适用广泛的基础用法。">
    <Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="带图标的顶栏菜单" Introduction="适用简单的网站应用，通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标">
    <Menu Items="@IconItems" DisableNavigation="true" />
</Block>

<Block Title="侧栏" Introduction="适用于左右结构布局的网站，通过设置 <code>IsVertical</code> 更改导航菜单为侧栏">
    <div style="width:220px; border-right: 1px solid #e6e6e6; padding-right: 4px;">
        <Menu Items="@SideMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClickSideMenu" />
    </div>
    <Logger @ref="TraceSideMenu" class="mt-3" />
</Block>

<Block Title="带图标的侧栏菜单" Introduction="通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标">
    <div style="width:220px;">
        <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="手风琴效果的侧栏" Introduction="通过设置 <code>IsAccordion</code> 属性设置手风琴特效侧栏菜单">
    <div style="width:220px;">
        <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="带收缩的侧栏效果" Introduction="通过设置 <code>IsCollapsed</code> 属性设置侧栏菜单为收起状态">
    <Alert ShowBar="true">请注意 <code>IsCollapsed</code> 属性仅当 <code>IsVertical</code> 为真时才生效即仅侧边栏菜单时可用</Alert>
    <p>本例中使用布局组件 <code>Layout</code> 来进行网页构建，设置 <code>SideWith="0"</code> 关闭侧边栏宽度设置，使用内部菜单宽度来自适应</p>
    <Layout SideWidth="0" IsFullSide="true" ShowFooter="true">
        <Header>
            <div class="d-flex align-items-center pl-3" style="background-color: #17a2b8; height: 50px; color: #fff;">
                <a style="padding: 4px 12px; color: #fff; background-color: #1ab394; border-color: #1ab394; border-radius: 4px;" class="@ClassString" title="点击展开收缩左侧菜单" @onclick="@CollapseMenu">
                    <i class="fa fa-bars"></i>
                </a>
                <span class="ml-3">我是网站标题</span>
            </div>
        </Header>
        <Side>
            <div class="menu-demo" style="background-color: #2f4050; color: #dcdfe6; height: 100%; padding: 6px 0;">
                <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" IsCollapsed="@IsCollapsed" />
            </div>
        </Side>
        <Main>
            <div style="padding: 10rem 1rem;">Main</div>
        </Main>
        <Footer>
            <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84;"><a href="@WebsiteOption.Value.BootstrapAdminLink" target="_blank" style="color: #fff;">Bootstrap Admin</a></div>
        </Footer>
    </Layout>
</Block>

<Block Title="带挂件的菜单" Introduction="通过设置 <code>MenuItem</code> 的 <code>Component</code> 属性设置自定义组件到菜单中">
    <div style="width:220px;">
        <Menu Items="@WidgetIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="自定义节点收缩" Introduction="通过设置 <code>MenuItem</code> 的 <code>IsCollapsed</code> 属性设置节点是否收起">
    <p>本例中 <b>权限设置</b> 节点为展开状态，其余节点为收起状态</p>
    <div style="width:220px;">
        <Menu Items="@CollapsedIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="动态更改菜单" Introduction="通过代码动态设置 <code>Items</code> 属性值更改菜单项">
    <div class="mt-3" style="width:220px;">
        <Menu Items="@DynamicSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
    <Button Text="更新菜单" OnClick="UpdateMenu" />
    <Button Text="重置菜单" OnClick="ResetMenu" />
</Block>

<Block Title="部分菜单禁用功能" Introduction="通过设置 <code>MenuItem</code> 的 <code>IsDisabled</code> 属性设置节点是否禁用">
    <p>本例中 <b>导航二</b> 节点为禁用状态，菜单与其子菜单均不可点击</p>
    <Menu Items="@DisabledMenuItems" DisableNavigation="true" OnClick="@OnClick2" />
    <p class="mt-3"><b>侧栏的禁用示例</b></p>
    <div style="width:220px; border-right: 1px solid #e6e6e6;">
        <Menu Items="@DisabledMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClick2" />
    </div>
    <Logger @ref="Trace2" class="mt-3" />
</Block>

<AttributeTable Items="@GetAttributes()" />

根据相关法律政策,该内容无法显示