如何解决Blazor 和 MatBlazor MatAppBar
我想在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。