简体   繁体   中英

MudBlazor scrollable content with pinned ToolBar

I want achieve the following result using the MudBlazor library.

  1. The (A) element i want to be a MudToolBar with secondary color pinned in the top of the Container
  2. The (C) element i want it to be a MudToolBar again stuck in the bottom of the Container
  3. The (B) element i want it to be a Scrollable container with whatever i put inside. When i scroll it, the elements A && C MUST not scroll along with the content.

All of that is diplayed inside a Drawer's main content

<MudMainContent>
        <MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
            <MudLayout>
                // Here i will write the whole component
            </MudLayout>
        </MudPaper>
    </MudMainContent>

Up to now i have done the following

<div class="d-flex flex-grow-1 flex-row">
    <MudPaper Elevation="25" Class="flex-grow-1">
        <MudToolBar> 
            A-Element
        </MudToolBar>


   <div class="d-flex flex-column" style="max-height:100vh;min-height:100vh; overflow:scroll;">
            // Here there will be a ForEach loop creating elements B-Element
    </div>
    <MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="">
         C-Element
    </MudPaper>
    </MudPaper>
</div>

How can i do that??

在此处输入图像描述

Try this:

<div class="d-flex flex-column" style="height:100vh; overflow-x:auto;">
            // Here there will be a ForEach loop creating elements B-Element
</div>

with the same Condition I found this solution useful:

<MudPaper Class="d-flex flex-column overflow-x-auto " Height="100vh">
    Your Content
</MudPaper>

for more information you can read these:

  1. Enable Flexbox in MudBlazor
  2. Flex Direction in MudBlazor
  3. Overflow in MudBlazor

I read this answer and then I wrote my solution based on it.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM