Blazorise垂直边线按钮

Question

我正在使用布拉齐奥里斯组件库，我想创建一个垂直的侧边栏，类似于这里的操作方式：https://www.matblazor.com/，在这里，除非单击切换器，否则它总是折叠的。这看起来很简单，但我就是搞不懂。

当然，我使用的是布局组件和棒材构件，但是我不能让BarToggler总是正确地显示和控制侧边栏。

Answer 1

要使CSS始终可见，可以将CSS显示属性设置为内联- BarToggler。如果使用引导，还可以通过添加navbar-expand css类使条形菜单项永不折叠。示例：

@*Header bar*@
<Bar Class="navbar-expand"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">

    <BarToggler Display="Display.InlineFlex" Border="Border.Is0" Clicked="ToggleSidebar" />

    <BarBrand>
        Brandname
    </BarBrand>

    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#home">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#docs">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Dropdown</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>Action</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem>Another action</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Primary">Sign up</Button>
                <Button Color="Color.Secondary">Log in</Button>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

@*Sider bar*@
<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Primary"
     ThemeContrast="ThemeContrast.Dark"
     @bind-Visible="_sidebarVisible">

...

</Bar>

@code {
    private bool _sidebarVisible;

    private void ToggleSidebar()
    {
        _sidebarVisible = !_sidebarVisible;
    }
}

使用下面的布局并在<LayoutHeader>中放置标头栏，在<LayoutSiderContent>中放置目录栏，以实现类似于matblazor页面的布局。

<Layout>
    <LayoutHeader>
        Header
    </LayoutHeader>
    <Layout Sider>
        <LayoutSider>
            <LayoutSiderContent>
                Sider
            </LayoutSiderContent>
        </LayoutSider>
        <Layout>
            <LayoutContent>
                Content
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

​

​