如何使用 Blazor Bootstrap 创建新布局？

Answer 1

根据您的另一个问题，您必须为您的项目设置

InteractiveWebAssembly

渲染模式

创建新项目时，选择如下：

并按照交互式服务器模式doc中的步骤操作

但是你必须在app.razor

中将渲染模式保持为

InteractiveWebAssembly

我建议您选择交互式位置作为全局的原因是导航项只会在 OnAfterRenderAsync 生命周期事件期间加载。

如果按照组件设置交互位置，页面将呈现为静态，并且不会触发 OnAfterRenderAsync 事件，侧边栏将继续加载

public class Sidebar : BlazorBootstrapComponentBase
{
    private bool collapseNavMenu = true;

    private bool collapseSidebar;

    private bool isMobile;

    private IEnumerable<NavItem>? items;

    private DotNetObjectReference<Sidebar> objRef;

    private bool requestInProgress;

    protected override string? ClassNames => BlazorBootstrapComponentBase.BuildClassNames(base.Class, ("bb-sidebar", true), ("collapsed", collapseSidebar), ("expanded", !collapseSidebar));

    protected override string? StyleNames => BlazorBootstrapComponentBase.BuildStyleNames(base.Style, ("--bb-sidebar-width: " + Width.ToString(CultureInfo.InvariantCulture) + WidthUnit.ToCssString() + ";", Width > 0f));

    [Parameter]
    public string? BadgeText { get; set; }

    [Parameter]
    public string? CustomIconName { get; set; }

    [Parameter]
    [EditorRequired]
    public SidebarDataProviderDelegate? DataProvider { get; set; }

    [Parameter]
    public string? Href { get; set; } = string.Empty;


    [Parameter]
    public IconName IconName { get; set; }

    [Parameter]
    public string? ImageSrc { get; set; }

    private string? navMenuCssClass => GetNavMenuCssClass();

    [Parameter]
    [EditorRequired]
    public string? Title { get; set; }

    [Parameter]
    public float Width { get; set; } = 270f;


    [Parameter]
    public Unit WidthUnit { get; set; } = Unit.Px;


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await base.JSRuntime.InvokeVoidAsync("window.blazorBootstrap.sidebar.initialize", base.Id, objRef);
            bsWindowResize(await JSRuntimeExtensions.InvokeAsync<int>(base.JSRuntime, "window.blazorBootstrap.sidebar.windowSize", Array.Empty<object>()));
            await RefreshDataAsync(firstRender);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    protected override async Task OnInitializedAsync()
    {
        if (objRef == null)
        {
            objRef = DotNetObjectReference.Create(this);
        }

        if (base.AdditionalAttributes == null)
        {
            base.AdditionalAttributes = new Dictionary<string, object>();
        }

        await base.OnInitializedAsync();
    }

    [JSInvokable]
    public void bsWindowResize(int width)
    {
        if (width < 641)
        {
            isMobile = true;
        }
        else
        {
            isMobile = false;
        }
    }

    public async Task RefreshDataAsync(bool firstRender = false)
    {
        if (requestInProgress)
        {
            return;
        }

        requestInProgress = true;
        if (DataProvider != null)
        {
            SidebarDataProviderRequest request = new SidebarDataProviderRequest();
            SidebarDataProviderResult sidebarDataProviderResult = await DataProvider(request);
            Sidebar sidebar = this;
            IEnumerable<NavItem>? enumerable2;
            if (sidebarDataProviderResult == null)
            {
                IEnumerable<NavItem> enumerable = new List<NavItem>();
                enumerable2 = enumerable;
            }
            else
            {
                enumerable2 = sidebarDataProviderResult.Data;
            }

            sidebar.items = enumerable2;
        }

        requestInProgress = false;
        await InvokeAsync((Action)base.StateHasChanged);
    }

    public void ToggleSidebar()
    {
        collapseSidebar = !collapseSidebar;
        StateHasChanged();
    }

    internal void HideNavMenuOnMobile()
    {
        if (isMobile && !collapseNavMenu)
        {
            collapseNavMenu = true;
        }
    }

    private string GetNavMenuCssClass()
    {
        HashSet<string> hashSet = new HashSet<string>();
        if (collapseNavMenu)
        {
            hashSet.Add("collapse");
        }

        hashSet.Add("bb-sidebar-content nav-scrollable bb-scrollbar");
        if (collapseSidebar)
        {
            hashSet.Add("bb-scrollbar-hidden");
        }

        return string.Join(" ", hashSet);
    }

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    {
        TypeInference.CreateCascadingValue_0(__builder, 0, 1, __arg0: true, 2, this, 3, delegate (RenderTreeBuilder __builder2)
        {
            TypeInference.CreateCascadingValue_1(__builder2, 4, 5, collapseSidebar, 6, delegate (RenderTreeBuilder __builder3)
            {
                __builder3.OpenElement(7, "aside");
                __builder3.AddAttribute(8, "id", base.Id);
                __builder3.AddAttribute(9, "class", ClassNames);
                __builder3.AddAttribute(10, "style", StyleNames);
                __builder3.AddAttribute(11, "role", "navigation");
                __builder3.AddMultipleAttributes(12, RuntimeHelpers.TypeCheck((IEnumerable<KeyValuePair<string, object>>)base.AdditionalAttributes));
                __builder3.AddAttribute(13, "b-h9l5f7lx3r");
                __builder3.AddElementReferenceCapture(14, delegate (ElementReference __value)
                {
                    base.Element = __value;
                });
                __builder3.OpenElement(15, "div");
                __builder3.AddAttribute(16, "class", "bb-sidebar-top-row navbar");
                __builder3.AddAttribute(17, "b-h9l5f7lx3r");
                __builder3.OpenElement(18, "div");
                __builder3.AddAttribute(19, "class", "container-fluid ps-3");
                __builder3.AddAttribute(20, "b-h9l5f7lx3r");
                __builder3.OpenElement(21, "a");
                __builder3.AddAttribute(22, "class", "navbar-brand d-flex align-items-center");
                __builder3.AddAttribute(23, "href", Href);
                __builder3.AddAttribute(24, "b-h9l5f7lx3r");
                if (!string.IsNullOrWhiteSpace(ImageSrc))
                {
                    __builder3.OpenElement(25, "span");
                    __builder3.AddAttribute(26, "class", "navbar-brand-image me-2");
                    __builder3.AddAttribute(27, "b-h9l5f7lx3r");
                    __builder3.OpenElement(28, "img");
                    __builder3.AddAttribute(29, "src", ImageSrc);
                    __builder3.AddAttribute(30, "alt", Title);
                    __builder3.AddAttribute(31, "b-h9l5f7lx3r");
                    __builder3.CloseElement();
                    __builder3.CloseElement();
                }
                else
                {
                    __builder3.OpenElement(32, "span");
                    __builder3.AddAttribute(33, "class", "navbar-brand-icon");
                    __builder3.AddAttribute(34, "b-h9l5f7lx3r");
                    __builder3.OpenComponent<Icon>(35);
                    __builder3.AddComponentParameter(36, "Name", RuntimeHelpers.TypeCheck(IconName));
                    __builder3.AddComponentParameter(37, "CustomIconName", RuntimeHelpers.TypeCheck(CustomIconName));
                    __builder3.AddComponentParameter(38, "Class", "fs-4 me-2");
                    __builder3.CloseComponent();
                    __builder3.CloseElement();
                }

                __builder3.OpenElement(39, "span");
                __builder3.AddAttribute(40, "class", "navbar-brand-text fw-semibold expanded-only me-2");
                __builder3.AddAttribute(41, "b-h9l5f7lx3r");
                __builder3.AddContent(42, Title);
                __builder3.CloseElement();
                if (!string.IsNullOrWhiteSpace(BadgeText))
                {
                    __builder3.OpenElement(43, "span");
                    __builder3.AddAttribute(44, "class", "navbar-brand-badge badge expanded-only");
                    __builder3.AddAttribute(45, "b-h9l5f7lx3r");
                    __builder3.AddContent(46, BadgeText);
                    __builder3.CloseElement();
                }

                __builder3.CloseElement();
                __builder3.AddMarkupContent(47, "\r\n                    ");
                __builder3.OpenElement(48, "button");
                __builder3.AddAttribute(49, "title", "Navigation menu");
                __builder3.AddAttribute(50, "class", "navbar-toggler px-2");
                __builder3.AddAttribute(51, "onclick", EventCallback.Factory.Create<MouseEventArgs>((object)this, (Action)ToggleNavMenu));
                __builder3.AddAttribute(52, "b-h9l5f7lx3r");
                __builder3.AddMarkupContent(53, "<span class=\"navbar-toggler-icon bi bi-list\" b-h9l5f7lx3r></span>");
                __builder3.CloseElement();
                __builder3.CloseElement();
                __builder3.CloseElement();
                __builder3.AddMarkupContent(54, "\r\n\r\n            ");
                __builder3.OpenElement(55, "div");
                __builder3.AddAttribute(56, "class", navMenuCssClass);
                __builder3.AddAttribute(57, "b-h9l5f7lx3r");
                if (items == null)
                {
                    __builder3.OpenElement(58, "div");
                    __builder3.AddAttribute(59, "class", "text-center my-2");
                    __builder3.AddAttribute(60, "b-h9l5f7lx3r");
                    __builder3.OpenComponent<Spinner>(61);
                    __builder3.AddComponentParameter(62, "Type", RuntimeHelpers.TypeCheck(SpinnerType.Dots));
                    __builder3.AddComponentParameter(63, "Color", RuntimeHelpers.TypeCheck(SpinnerColor.Secondary));
                    __builder3.CloseComponent();
                    __builder3.CloseElement();
                }
                else
                {
                    __builder3.OpenComponent<SidebarItemGroup>(64);
                    __builder3.AddComponentParameter(65, "NavItems", RuntimeHelpers.TypeCheck(items));
                    __builder3.CloseComponent();
                }

                __builder3.CloseElement();
                __builder3.CloseElement();
            });
        });
    }
}