Blazor и MatBlazor MatAppBar

Я хочу использовать MatAppBar с MatDrawer. Проблема в том, что MatDrawer прокручивает панель приложения. Как заставить его прокручиваться за AppBar?

Снимок экрана MatAppBar с 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>

blazor matblazor
person Vasily Asur    schedule 28.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я поменял здесь код и получил результат

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

результат

person Vasily Asur    schedule 28.12.2020