Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Menu 导航菜单

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

顶栏

适用广泛的基础用法。

Demo

带图标的顶栏菜单

适用简单的网站应用,通过设置菜单项 MenuItemIcon 属性设置菜单图标

Demo

侧栏

适用于左右结构布局的网站,通过设置 IsVertical 更改导航菜单为侧栏

Demo

带图标的侧栏菜单

通过设置菜单项 MenuItemIcon 属性设置菜单图标

Demo

手风琴效果的侧栏

通过设置 IsAccordion 属性设置手风琴特效侧栏菜单

Demo

带收缩的侧栏效果

通过设置 IsCollapsed 属性设置侧栏菜单为收起状态

Demo

本例中使用布局组件 Layout 来进行网页构建,设置 SideWith="0" 关闭侧边栏宽度设置,使用内部菜单宽度来自适应

我是网站标题
Main

带挂件的菜单

通过设置 MenuItemComponent 属性设置自定义组件到菜单中

Demo

自定义节点收缩

通过设置 MenuItemIsCollapsed 属性设置节点是否收起

Demo

本例中 权限设置 节点为展开状态,其余节点为收起状态

动态更改菜单

通过代码动态设置 Items 属性值更改菜单项

Demo

部分菜单禁用功能

通过设置 MenuItemIsDisabled 属性设置节点是否禁用

Demo

本例中 导航二 节点为禁用状态,菜单与其子菜单均不可点击

侧栏的禁用示例

Attributes

Loading...
@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()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload