Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Nav 导航组件

为网站提供导航功能的菜单。

基本导航样式

本例中通过设置 Items 属性,通过程序 api 对导航组件进行赋值,并且在导航组件的 ChildContext 中直接写入 NavLink 组件

Demo

对齐

通过设置 Alignment 属性来控制组件对齐方式

Demo

垂直

本例中通过设置 IsVertical 属性控制导航是否为垂直分布

Demo

胶囊式

通过设置 IsPills 属性控制导航菜单背景色

Demo

填充和对齐

通过设置 IsFill 属性控制导航菜单均匀分布填满整个导航栏

Demo

等宽

通过设置 IsJustified 属性使每个导航项目将具有相同的宽度。

Demo

Attributes

Loading...
@page "/navs"
@inject IOptions<WebsiteOptions> WebsiteOption

<h3>Nav 导航组件</h3>

<h4>为网站提供导航功能的菜单。</h4>

<Block Title="基本导航样式" Introduction="本例中通过设置 <code>Items</code> 属性,通过程序 api 对导航组件进行赋值,并且在导航组件的 <code>ChildContext</code> 中直接写入 <code>NavLink</code> 组件">
    <Nav Items="@Items">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<Block Title="对齐" Introduction="通过设置 <code>Alignment</code> 属性来控制组件对齐方式">
    <Nav Items="@Items" Alignment="Alignment.Center">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
    <Divider Text="分割线" />
    <Nav Items="@Items" Alignment="Alignment.Right">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<Block Title="垂直" Introduction="本例中通过设置 <code>IsVertical</code> 属性控制导航是否为垂直分布">
    <Nav Items="@Items" IsVertical="true">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
    <Divider Text="分割线" />
    <Nav Items="@Items" IsVertical="true" Alignment="Alignment.Right">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<Block Title="胶囊式" Introduction="通过设置 <code>IsPills</code> 属性控制导航菜单背景色">
    <Nav Items="@Items" IsPills="true">
        <a class="nav-link active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<Block Title="填充和对齐" Introduction="通过设置 <code>IsFill</code> 属性控制导航菜单均匀分布填满整个导航栏">
    <Nav Items="@Items" IsPills="true" IsFill="true">
        <a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<Block Title="等宽" Introduction="通过设置 <code>IsJustified</code> 属性使每个导航项目将具有相同的宽度。">
    <Nav Items="@Items" IsPills="true" IsFill="true" IsJustified="true">
        <a class="nav-link nav-item active" href="#" @onclick:preventDefault>Active</a>
        <NavLink class="nav-link nav-item" href="#" @onclick:preventDefault>Link</NavLink>
        <a class="nav-link nav-item" href="#" @onclick:preventDefault>Link</a>
        <a class="nav-link nav-item disabled" href="#" tabindex="-1" aria-disabled="true" @onclick:preventDefault>Disabled</a>
    </Nav>
</Block>

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Navs
    {
        private IEnumerable<NavLink> Items => GetItems();

        private IEnumerable<NavLink> GetItems()
        {
            var ret = new List<NavLink>();
            var link = new NavLink();
            link.SetParametersAsync(ParameterView.FromDictionary(new Dictionary<string, object>()
            {
                ["href"] = WebsiteOption.Value.AdminUrl,
                ["class"] = "nav-link nav-item",
                ["target"] = "_blank",
                ["ChildContent"] = new RenderFragment(builder =>
                {
                    builder.AddContent(0, "BootstrapAdmin");
                })
            }));
            ret.Add(link);
            return ret;
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Alignment",
                Description = "组件对齐方式",
                Type = "Alignment",
                ValueList = "Left|Center|Right",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsVertical",
                Description = "垂直分布",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsPills",
                Description = "胶囊",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsFill",
                Description = "填充",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsJustified",
                Description = "等宽",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload