Blazor 和 MatBlazor MatAppBar

编程问答 2022-06-01

问题描述

我想在 MatDrawer 中使用 MatAppBar。问题是 MatDrawer 在应用栏上滚动。如何让它在 AppBar 后面滚动？

Screenshot of MatAppBar with MatDrawer

<MatAppBarContainer >
<MatAppBar Fixed="true">
    <MatAppBarRow>
        <MatAppBarSection>
            <MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())"></MatIconButton>
            <MatAppBarTitle>MatBlazor - Material Design components for Blazor</MatAppBarTitle>
        </MatAppBarSection>
        <MatAppBarSection Align="@MatAppBarSectionAlign.End">
            <MatIconButton Icon="favorite"></MatIconButton>
        </MatAppBarSection>
    </MatAppBarRow>
</MatAppBar>
<MatAppBarContent>
    <MatDrawerContainer Style="width: 100%; height: 100vh;">
        <MatDrawer @bind-Opened="@Opened" Style="background-color: whitesmoke">
            <MatNavMenu>
                <MatNavItem OnClick="ClickMe" Title="Item 1">Item 1 - OnClick</MatNavItem>
                <MatNavItem disabled="true" Title="Item 2">Item 2</MatNavItem>
            </MatNavMenu>
        </MatDrawer>
        <MatDrawerContent>
            <div>
                <p>page content</p>
            </div>
        </MatDrawerContent>
    </MatDrawerContainer>
</MatAppBarContent>

解决方法

我在这里更改了代码并收到了结果

<MatAppBarContainer Style="width: 100vw; height: 100vh;">
<MatAppBar>    
    <MatAppBarRow>
        <MatAppBarSection>
            <MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())" Style="box-shadow:none; outline:none"></MatIconButton>
            <MatAppBarTitle>MatBlazor - Material Design components for Blazor</MatAppBarTitle>
        </MatAppBarSection>
        <MatAppBarSection Align="@MatAppBarSectionAlign.End">
            <MatIconButton Style="box-shadow:none; outline:none" Icon="favorite"></MatIconButton>
        </MatAppBarSection>
    </MatAppBarRow>
</MatAppBar>
<MatAppBarContent>
    <MatDrawerContainer Style="width: 100vw; height: 100%;">
        <MatDrawer @bind-Opened="@Opened" Style="background-color: whitesmoke">
            <MatNavMenu>
                <MatNavItem OnClick="ClickMe" Title="Item 1">Item 1 - OnClick</MatNavItem>
                <MatNavItem Disabled="true" Title="Item 2">Item 2</MatNavItem>                    
            </MatNavMenu>
        </MatDrawer>
        <MatDrawerContent>
            <div>
                <p>page content</p>
            </div>
        </MatDrawerContent>
    </MatDrawerContainer>
</MatAppBarContent>

the result

blazormatblazor