Blazorise Offcanvas component

Blazorise Offcanvas component allows to build hidden sidebars into your project for navigation, shopping carts.

Offcanvas is a sidebar component that can be toggled to appear from the start, end, top, or bottom edge of the viewport.

<Offcanvas> the main container
- <OffcanvasHeader>, a main offcanvas title.
- <OffcanvasBody>, a main content of the offcanvas.
- <OffcanvasFooter>, a main offcanvas footer.

Examples

Start Placement

The Offcanvas with the start placement appears from the beginning of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Start">
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Start</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Top Placement

The Offcanvas with the top placement appears from the top of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Top">
    <OffcanvasHeader>
        Offcanvas Top
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Top</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Bottom Placement

The Offcanvas with the bottom placement appears from the bottom of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Bottom">
    <OffcanvasHeader>
        Offcanvas Bottom
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Bottom</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

End Placement

The Offcanvas with the end placement appears from the end of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.End">
    <OffcanvasHeader>
        Offcanvas End
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas End</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Closing

If you want to prevent modal from closing you can use Closing event.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Closing="@OnOffcanvasClosing">
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        <Div Padding="Padding.Is3">
             Offcanvas Content
        </Div>
        <Div Padding="Padding.Is3">
             <Button Color="Color.Secondary" Clicked="@HideOffcanvas">This will close the offcanvas</Button>
             <Button Color="Color.Primary" Clicked="@TryHideOffcanvas">This will not</Button>
        </Div>
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Start</Button>

@code {
    private Offcanvas offcanvasRef;

    private bool cancelClose;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        cancelClose = false;

        return offcanvasRef.Hide();
    }

    private Task TryHideOffcanvas()
    {
        cancelClose = true;

        return offcanvasRef.Hide();
    }

    private Task OnOffcanvasClosing( OffcanvasClosingEventArgs e )
    {
        // just set Cancel to prevent offcanvas from closing
        e.Cancel = cancelClose
            || e.CloseReason != CloseReason.UserClosing;

        return Task.CompletedTask;
    }
}

Footer

To show a footer in the Offcanvas just add an OffcanvasFooter component.

<Offcanvas @ref="offcanvasRef" ShowBackdrop>
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
    <OffcanvasFooter>
        <Button Color="Color.Primary" Clicked="@HideOffcanvas">Close Offcanvas</Button>
    </OffcanvasFooter>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

API

Attributes

Offcanvas

Name	Description	Type	Default
`Visible`	Determines whether the Offcanvas is visible or hidden.	`bool`	`false`
`VisibleChanged`	Occurs when the Visible property value changes.	`EventCallback<bool>`
`Animated`	Determines whether the Offcanvas has animation.	`bool`	`true`
`AnimationDuration`	The duration of the Offcanvas animation in milliseconds.	`int`	`300`
`ShowBackdrop`	Determines whether to show the backdrop behind the Offcanvas.	`bool`	`true`
`Placement`	The placement of the Offcanvas (Start, End, Top, Bottom).	`Placement`	`Placement.Start`

OffcanvasHeader

Name	Description	Type	Default
`Class`	The custom CSS class for the OffcanvasHeader.	`string`

OffcanvasBody

Name	Description	Type	Default
`Class`	The custom CSS class for the OffcanvasBody.	`string`

OffcanvasFooter

Name	Description	Type	Default
`Class`	The custom CSS class for the OffcanvasFooter.	`string`