BootstrapBlazor實戰 Menu 導航選單使用(1)

AlexChow發表於2022-04-25
bootBlazor

實戰BootstrapBlazorMenu 導航選單的使用, 以及整合Freesql orm快速製作選單項資料庫後臺維護頁面

demo演示的是Sqlite驅動,FreeSql支援多種資料庫，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/達夢/神通/人大金倉/翰高/華為GaussDB/MsAccess

1.Menu 導航選單

為頁面和功能提供導航的選單列表。

@code{
 //演示資料
 private IEnumerable<MenuItem>? Items { get; set; } = new List<MenuItem>
            { 
                new MenuItem() { Text = "維保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},
                new MenuItem() { Text = "車主", Icon = "fa fa-address-book", Url = "/owners" ,Items=new List<MenuItem>() {
                    new MenuItem() { Text = "車主列表", Icon = "fa fa-address-book", Url = "/owners"  , Match = NavLinkMatch.All},
                    new MenuItem() { Text = "車主新增", Icon = "fa fa-address-book", Url = "/owners/add"  , Match = NavLinkMatch.All},
                }},
                new MenuItem() { Text = "車輛", Icon = "fa fa-fw fa-car", Url = "/cars" },
                new MenuItem() { Text = "保險", Icon = "fa fa-fw fa-fa", Url = "/insurans"},
                new MenuItem() { Text = "出險記錄", Icon = "fa fa-map-o", Url = "/insurancerecords"},
                new MenuItem() { Text = "花名冊", Icon = "fa fa-fw fa-users", Url = "users" }
            };
}

頂欄

適用廣泛的基礎用法。

<Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />

@code{
 private Task OnClickMenu(MenuItem item)
    {
        System.Console.WriteLine($"選單點選項: {item.Text}");
        return Task.CompletedTask;
    }
}

底欄

設定引數 IsBottom 值為 true 選單欄在容器底部，適用移動端

<div style="height: 120px">
    <Menu Items="@Items" DisableNavigation="true" IsBottom="true" />
</div>

帶圖示的頂欄選單

適用簡單的網站應用，通過設定選單項 MenuItem 的 Icon 屬性設定選單圖示

new MenuItem() { Text = "維保管理", Icon = "fa fa-address-book"}

側欄

適用於左右結構佈局的網站，通過設定 IsVertical 更改導航選單為側欄

<div style="width:220px; border-right: 1px solid #e6e6e6; padding-right: 4px;">
    <Menu Items="@Items" DisableNavigation="true" IsVertical="true" />
</div>

帶圖示的側欄選單

通過設定選單項 MenuItem 的 Icon 屬性設定選單圖示

<div style="width:220px;">
    <Menu Items="@Items" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
</div>

手風琴效果的側欄

通過設定 IsAccordion 屬性設定手風琴特效側欄選單

<div style="width:220px;">
    <Menu Items="@Items" DisableNavigation="true" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" />
</div>

動態更改選單

通過程式碼動態設定 Items 屬性值更改選單項

<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" />

@code{

    private IEnumerable<MenuItem>? DynamicSideMenuItems { get; set; }

    private Task UpdateMenu()
    {
        DynamicSideMenuItems = new List<MenuItem>
            { 
                new MenuItem() { Text = "維保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},
                new MenuItem() { Text = "車主", Icon = "fa fa-address-book", Url = "/owners" ,Items=new List<MenuItem>() {
                    new MenuItem() { Text = "車主列表", Icon = "fa fa-address-book", Url = "/owners"  , Match = NavLinkMatch.All},
                    new MenuItem() { Text = "車主新增", Icon = "fa fa-address-book", Url = "/owners/add"  , Match = NavLinkMatch.All},
                }}
            };
        return Task.CompletedTask;
    }

    private async Task ResetMenu()
    {
        DynamicSideMenuItems = new List<MenuItem>
            { 
                new MenuItem() { Text = "維保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},
                new MenuItem() { Text = "保險", Icon = "fa fa-fw fa-fa", Url = "/insurans"},
                new MenuItem() { Text = "出險記錄", Icon = "fa fa-map-o", Url = "/insurancerecords"},
                new MenuItem() { Text = "花名冊", Icon = "fa fa-fw fa-users", Url = "users" }
            };
        return Task.CompletedTask;
    }
}

等等....

在這裡篇幅有限不一一介紹,更多使用說明參考 https://www.blazor.zone/menus

Attributes 屬性

引數
說明
型別
可選值
預設值
Items
選單元件資料集合
IEnumerable<MenuItem>
—
—
IsVertical
是否為側欄
bool
true|false
false
IsBottom
是否為底欄
bool
true|false
false
IsAccordion
是否手風琴效果
bool
true|false
false
DisableNavigation
是否禁止位址列導航
bool
true|false
false
OnClick
選單項被點選時回撥此方法
Func<MenuItem, Task>
—
—

2. 下一篇為BootstrapBlazor實戰 Freesql + MenuItem 控制元件使用

最近工作實在太忙了,本來還有好多計劃要分享給大家的,等過幾天閒暇下來,我再繼續補上吧. :->

大佬和同學們有問題在文章後面留言,我都會一一盡力解答. 下一篇介紹整合Freesql orm 快速製作選單項資料庫後臺維護頁面

專案原始碼

Github | Gitee

關聯專案

FreeSql QQ群：4336577(已滿)、8578575(已滿)、52508226(線上)

BA & Blazor QQ群：795206915、675147445

知識共享許可協議

本作品採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow（包含連結： https://github.com/densen2014 ），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我聯絡 。

AlexChow

今日頭條 | 部落格園 | 知乎 | Gitee | GitHub

相關文章