Simplest Usage. Drawer will be displayed on right, and it will be closed when you click the masked area.

Use form in drawer with submit button.

Use Drawer to quickly preview details of an object, such as those in a list.

Render in current dom. custom container.

Drawer event handling

For Drawer component:

1. OnOpen: Execute before opening, and you can cancel the opening operation through the Cancel attribute of the parameter.
2. OnClose: Before closing, you need to control the Visible paramter of the Drawer component through it.

For DrawerService:

1. DrawerRef.OnOpen: Execute before opening, and call this method in Drawe.OnOpen event internally.
2. DrawerRef.OnClosing: Execute before closing
3. DrawerRef.OnClosed: Execute after shutdown

The Drawer can appear from any edge of the screen.

Set the offset in X or Y direction.

Open a new drawer on top of an existing drawer to handle multi branch tasks.

Usage of Drawer's service, examples demonstrate user-defined templates, custom components.

Template code: DrawerTemplateDemo.razor

@namespace AntDesign
@inherits FeedbackComponent<string, string>

<div>
    value: <Input @bind-Value="value" />
    <br/>
    <br/>
    <Button Type="ButtonType.Primary" OnClick="OnClose">Confirm</Button>
</div>

@code{

    string value;

    protected override void OnInitialized()
    {
        value = base.Options;
        base.OnInitialized();
    }

    async Task OnClose()
    {
        DrawerRef<string> drawerRef = base.FeedbackRef as DrawerRef<string>;
        await drawerRef!.CloseAsync(value);
    }
}

use dropdown or popup in drawer.