首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Blazor & MatBlazor MatAppBar

Blazor & MatBlazor MatAppBar
EN

Stack Overflow用户
提问于 2020-12-29 03:16:46
回答 1查看 266关注 0票数 0

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

Screenshot of MatAppBar with MatDrawer

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2020-12-29 04:05:35

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

代码语言:javascript
复制
<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65482858

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档