RadzenLayout Sidebar animation without condensing body?

Radzen.Blazor Components
1

My question is the same as this one, but I don't see any answers on it: Inquiry Regarding Modifying RadzenSidebar Behavior in RadzenLayout Component

Here is the code I have so far, but I'm not able to prevent it from pushing the "body" element over.

<RadzenLayout style="background-color: black; grid-template-areas: 'rz-header rz-header rz-sidebar' 'rz-body rz-body rz-sidebar'">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1em">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar Responsive="false" @bind-Expanded="@sidebarExpanded" style="position: relative">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
</RadzenLayout>

@code {
    bool sidebarExpanded = false;
}
2

Hi @D_Roberts,

Check this demo: Blazor Layout Component | Free UI Components by Radzen

1 Like
3

Hey Korchev, I've been messing around with that for a while, and haven't figured out the configuration to prevent the body from being pushed when the component comes in from the right side the Code above was developed in that Ui Demo that you linked to .

Do you have an example of it coming in from the right where it does the overlay, but doesn't push the body?

4

No. The linked demos are all we have. You can consider using the side dialog.

1 Like
5

Can you confirm that the RadzenLayout can come in from the right without pushing the body, or is there no demo of it because it can't be accomplished with those components?

6

This looks like its going to work fine. Just wanting to know for future use cases if Layout has a limitation when using the right slide in. Thanks for your help.

7

@korchev is correct. I know that others have had this question, so I'm adding the solution here.

Here is the Razor Layout for a button to activate the dialog service. Reminder, the RadzenLayout is not easily configured (I wonder if it even is based on the responses on the forums):

<div class="card">
    <div class="card-header p-0">
        <div class="d-flex flex-wrap">
            <div class="px-2 mt-2 me-auto">
                <RadzenButton Text="Dialog on Side" ButtonStyle="ButtonStyle.Secondary" Click="@OpenOrder" />
            </div>
        </div>
    </div>
</div>
// I put my code into a partial class, instead of the @code block.  

public async Task OpenOrder()
{
    string styles = "position:fixed;z-index:1002;top:0;float:right;right:10px;";

    await DialogService.OpenSideAsync<RadzenLayoutTest>("Side Panel", options: new SideDialogOptions { CloseDialogOnOverlayClick = closeDialogOnOverlayClick, Position = DialogPosition.Right, ShowMask = showMask, Style = styles });
}

// This OpenOrder method will pop the following RadzenLayoutTest

<h3>DialogSideContent</h3>

<p>
    Side Dialog
</p>

<RadzenButton Size="ButtonSize.ExtraSmall" Text="Close Side Dialog" Click="@(_ => Service.CloseSide())" />

// Class for the RadzenTestLayout 

[Inject]
DialogService Service { get; set; }

Going to breakdown how this works.

String styles is the style for the Dialog, which will be rendered as an <aside> element. I had to make mine more complicated, because the UI I'm working with had more elements that the dialog was coming into, and it was displaying underneath the main content #wrapper.

Next we have the await DialogService.OpenSideAsync<T>: This takes the razor page you want to display in the dialog service.

Next are the properties for the object that OpenSideAsync expects:

Title which is what will display at the top of your dialog.
SideDialogOptions {} this is the object where we will put the properties. If you use this in your own developer environment, you will see all the properties much easier than if you were in the Radzen Demo environment.

The rest of the properties are self explanatory. But one note on DialogPosition.Right You can't experiment with this in the demo with this syntax. The browser doesn't like it, and the Radzen demo will throw an error.