P11 Blazor UI Library – Bootstrap 5.3 Components

P11Offcanvas Component

The P11Offcanvas component is a Bootstrap-based sidebar that slides in from the edge of the viewport. It's fully integrated with Bootstrap's JavaScript for smooth animations and accessibility features, providing a responsive and user-friendly way to display supplementary content or navigation.

Note: This component relies on Bootstrap's CSS and JavaScript for its functionality and styling. Ensure Bootstrap's JS is properly loaded in your application. Proper use of AriaLabel or AriaLabelledBy is highly recommended for accessibility.

P11Offcanvas Component Examples

This page demonstrates the P11Offcanvas component in various configurations, including all four Bootstrap positions and specific behaviors like backdrop, ESC key closing, and ARIA labels.

1. Standard Offcanvas Demos (All Positions)

These Offcanvas examples use the default settings: with backdrop, scrollable background, and closing via ESC key/click outside.

This is the content of the Offcanvas at the top!

It slides in from the top of the viewport.

This is the content of the Offcanvas at the bottom!

It slides in from the bottom of the viewport.

This is the content of the Offcanvas on the left!

It slides in from the left side of the viewport.

This is the content of the Offcanvas on the right!

It slides in from the right side of the viewport.

Implementation

<h4 class="mb-3">1. Standard Offcanvas Demos (All Positions)</h4>
<p>These Offcanvas examples use the default settings: with backdrop, scrollable background, and closing via ESC key/click outside.</p>
<div class="d-flex flex-wrap gap-2 mb-4">
    <button class="btn btn-info" @onclick="() => isOffcanvasTopOpen = !isOffcanvasTopOpen">
        Toggle Top Offcanvas (@(isOffcanvasTopOpen ? "Close" : "Open"))
    </button>
    <button class="btn btn-info" @onclick="() => isOffcanvasBottomOpen = !isOffcanvasBottomOpen">
        Toggle Bottom Offcanvas (@(isOffcanvasBottomOpen ? "Close" : "Open"))
    </button>
    <button class="btn btn-info" @onclick="() => isOffcanvasLeftOpen = !isOffcanvasLeftOpen">
        Toggle Left Offcanvas (@(isOffcanvasLeftOpen ? "Close" : "Open"))
    </button>
    <button class="btn btn-info" @onclick="() => isOffcanvasRightOpen = !isOffcanvasRightOpen">
        Toggle Right Offcanvas (@(isOffcanvasRightOpen ? "Close" : "Open"))
    </button>
</div>

@* --- Offcanvas Top (Standard) --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasTopOpen"
              Title="Offcanvas Top (Standard)"
              Position="OffcanvasPosition.Top"
              HasBackdrop="true"
              CloseOnEscape="true"
              ShowCloseButton="true">
    <p>This is the content of the Offcanvas at the top!</p>
    <p>It slides in from the top of the viewport.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasTopOpen = false">Close</button>
</P11Offcanvas>

@* --- Offcanvas Bottom (Standard) --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasBottomOpen"
              Title="Offcanvas Bottom (Standard)"
              Position="OffcanvasPosition.Bottom"
              HasBackdrop="true"
              CloseOnEscape="true"
              ShowCloseButton="true">
    <p>This is the content of the Offcanvas at the bottom!</p>
    <p>It slides in from the bottom of the viewport.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasBottomOpen = false">Close</button>
</P11Offcanvas>

@* --- Offcanvas Left (Standard - mapped to Bootstrap's 'start') --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasLeftOpen"
              Title="Offcanvas Left (Standard)"
              Position="OffcanvasPosition.Left"
              HasBackdrop="true"
              CloseOnEscape="true"
              ShowCloseButton="true">
    <p>This is the content of the Offcanvas on the left!</p>
    <p>It slides in from the left side of the viewport.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasLeftOpen = false">Close</button>
</P11Offcanvas>

@* --- Offcanvas Right (Standard - mapped to Bootstrap's 'end') --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasRightOpen"
              Title="Offcanvas Right (Standard)"
              Position="OffcanvasPosition.Right"
              HasBackdrop="true"
              CloseOnEscape="true"
              ShowCloseButton="true">
    <p>This is the content of the Offcanvas on the right!</p>
    <p>It slides in from the right side of the viewport.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasRightOpen = false">Close</button>
</P11Offcanvas>

@code {
    // --- Standard Offcanvas States (All Positions) ---
    private bool isOffcanvasTopOpen = false;
    private bool isOffcanvasBottomOpen = false;
    private bool isOffcanvasLeftOpen = false;
    private bool isOffcanvasRightOpen = false;
}

2. Specific Feature & Accessibility Test Cases

These examples highlight specific configurations and accessibility considerations.

This Offcanvas has no backdrop. The background remains scrollable, and clicking outside does NOT close it.

Try scrolling and clicking outside. Close it with the button or the ESC key.

This Offcanvas CANNOT be closed with the ESC key.

Try with ESC. You must use the close button or click on the backdrop.

This Offcanvas has no visible title in the header, but uses an ARIA label for accessibility.

It also has no built-in close button in the header. Use the one provided here.

This is an Offcanvas with minimal content, demonstrating the functionality of the integrated close button in the header.

Implementation

<h4 class="mb-3">2. Specific Feature & Accessibility Test Cases</h4>
<p>These examples highlight specific configurations and accessibility considerations.</p>
<div class="d-flex flex-wrap gap-2 mb-4">
    <button class="btn btn-primary" @onclick="() => isOffcanvasNoBackdropOpen = true">
        Open Offcanvas without Backdrop
    </button>
    <button class="btn btn-warning" @onclick="() => isOffcanvasNoEscapeOpen = true">
        Open Offcanvas without ESC Close
    </button>
    <button class="btn btn-success" @onclick="() => isOffcanvasAriaLabelOpen = true">
        Open Offcanvas with ARIA Label
    </button>
    <button class="btn btn-info" @onclick="() => isOffcanvasOnlyCloseButtonOpen = true">
        Open Offcanvas (Close Button Only)
    </button>
</div>

@* --- Offcanvas No Backdrop (No Scroll Lock, No Close on Outside Click) --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasNoBackdropOpen"
              Position="OffcanvasPosition.Right"
              Title="Offcanvas without Backdrop"
              HasBackdrop="false"
              CloseOnEscape="true">
    <p>This Offcanvas has no backdrop. The background remains scrollable, and clicking outside does NOT close it.</p>
    <p class="text-muted small">Try scrolling and clicking outside. Close it with the button or the ESC key.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasNoBackdropOpen = false">Close</button>
</P11Offcanvas>

@* --- Offcanvas No Escape --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasNoEscapeOpen"
              Position="OffcanvasPosition.Right"
              Title="Offcanvas without ESC Close"
              HasBackdrop="true"
              CloseOnEscape="false"
              ShowCloseButton="true">
    <p>This Offcanvas CANNOT be closed with the ESC key.</p>
    <p class="text-muted small">Try with ESC. You must use the close button or click on the backdrop.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasNoEscapeOpen = false">Close</button>
</P11Offcanvas>

@* --- Offcanvas with ARIA-Label only (no visible Title) --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasAriaLabelOpen"
              Position="OffcanvasPosition.Bottom"
              AriaLabel="Custom description of the bottom panel for screen readers"
              ShowCloseButton="false">
    <p>This Offcanvas has no visible title in the header, but uses an ARIA label for accessibility.</p>
    <p class="text-muted small">It also has no built-in close button in the header. Use the one provided here.</p>
    <button class="btn btn-secondary" @onclick="() => isOffcanvasAriaLabelOpen = false">Close (Custom)</button>
</P11Offcanvas>

@* --- Offcanvas with only a close button in the header (minimal content) --- *@
<P11Offcanvas @bind-IsOpen="isOffcanvasOnlyCloseButtonOpen"
              Position="OffcanvasPosition.Right"
              Title="Offcanvas: Close Button Only"
              HasBackdrop="true"
              CloseOnEscape="true"
              ShowCloseButton="true">
    <p>This is an Offcanvas with minimal content, demonstrating the functionality of the integrated close button in the header.</p>
</P11Offcanvas>

@code {
    // --- Specific Test Case States ---
    private bool isOffcanvasNoBackdropOpen = false;
    private bool isOffcanvasNoEscapeOpen = false;
    private bool isOffcanvasAriaLabelOpen = false;
    private bool isOffcanvasOnlyCloseButtonOpen = false;
}

Component API

Parameter	Type	Default	Description
`IsOpen`	`bool`	`false`	Gets or sets a boolean indicating whether the Offcanvas is currently open. Use with `@bind-IsOpen` for two-way binding. Setting this will trigger Bootstrap's show/hide methods via JS interop.
`Position`	`OffcanvasPosition`	`OffcanvasPosition.Right`	Gets or sets the position of the Offcanvas (e.g., Top, Right, Bottom, Left).
`Title`	`string`	`null`	Gets or sets the title to be displayed in the Offcanvas header.
`AriaLabel`	`string`	`null`	Gets or sets the ARIA label for the Offcanvas dialog for accessibility. This attribute is used if `AriaLabelledBy` is not provided.
`AriaLabelledBy`	`string`	`null`	Gets or sets the ID of the element that labels the Offcanvas dialog for accessibility. If provided, this takes precedence over `AriaLabel`.
`ShowCloseButton`	`bool`	`true`	Gets or sets a boolean indicating whether the close button (X icon) should be shown in the header.
`HasBackdrop`	`bool`	`true`	Gets or sets a boolean indicating whether a backdrop should be displayed when the Offcanvas is open. This directly affects Bootstrap's behavior when its JS is used.
`CloseOnEscape`	`bool`	`true`	Gets or sets a boolean indicating whether the Offcanvas can be closed by pressing the Escape key. This directly affects Bootstrap's behavior when its JS is used.
`ShowDevelopmentErrors`	`bool`	`true`	Gets or sets a boolean indicating whether development-related configuration errors should be shown in the UI. This is typically set to `false` in production environments.
`ChildContent`	`RenderFragment`	-	Gets or sets the content to be rendered within the Offcanvas body.
`AdditionalAttributes`	`Dictionary<string, object>`	`null`	Captures unmatched attributes to be rendered on the root HTML element of the Offcanvas.
Events
`IsOpenChanged`	`EventCallback<bool>`	-	Event callback for when the `IsOpen` parameter changes. This is primarily used for two-way binding with `@bind-IsOpen`.
`OnShow`	`EventCallback`	-	Event callback that fires immediately when the `show.bs.offcanvas` instance method is called. This event is triggered before the Offcanvas is actually shown.
`OnShown`	`EventCallback`	-	Event callback that fires when the Offcanvas has been made visible to the user (will wait for CSS transitions to complete).
`OnHide`	`EventCallback`	-	Event callback that fires immediately when the `hide.bs.offcanvas` instance method is called. This event is triggered before the Offcanvas is actually hidden.
`OnHidden`	`EventCallback`	-	Event callback that fires when the Offcanvas has finished being hidden from the user (will wait for CSS transitions to complete).