OffcanvasDocumentation.razor

@attribute [Route(pageUrl)]
@layout DemosMainLayout

<DemosPageHeadSection PageUrl="@pageUrl"
                      PageTitle="@pageTitle"
                      PageDescription="@pageDescription"
                      MetaTitle="@metaTitle"
                      MetaDescription="@metaDescription"
                      ImageUrl="@imageUrl" />

<DocsLink Href="@DemoRouteConstants.Docs_URL_Offcanvas" />

<Callout Color="CalloutColor.Danger" Heading="NOTE">Similar to modals, only one offcanvas can be shown at a time.</Callout>

<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
    <Demo Type="typeof(Offcanvas_Demo_01_Examples)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Dynamic component as offcanvas" PageUrl="@pageUrl" Link="dynamic-component-as-offcanvas">
    <div class="mb-3">Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.</div>
    <div class="mb-3">
        If dynamically-rendered components have component parameters, pass them as an <code>IDictionary</code>. The <code>string</code> is the parameter's name, and the <code>object</code> is the parameter's value.
    </div>
    <Demo Type="typeof(Offcanvas_Demo_02_A_Show_Dynamic_Component)" />
    <b>EmployeeDemoComponent1.razor</b>
    <Demo Type="typeof(EmployeeDemoComponent1)" ShowCodeOnly="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Pass event callbacks to a dynamic component" PageUrl="@pageUrl" Link="pass-event-callbacks-to-a-dynamic-component">
    <div class="mb-3">Event callbacks <code>(EventCallback)</code> can be passed in its parameter dictionary.</div>
    <div class="mb-3">
        In the following parent component example, the <code>ShowDTMessage</code> method assigns a string with the current time to <code>message</code>, and the value of <code>message</code> is rendered.
        The parent component passes the callback method, ShowDTMessage in the parameter dictionary:
        <ul style="disc">
            <li>The <code>string</code> key is the callback method's name, <code>OnClickCallback</code>.</li>
            <li>The <code>object</code> value is created by <code>EventCallbackFactory.Create</code> for the parent callback method, <code>ShowDTMessage</code>.</li>
        </ul>    
    </div>
    <Demo Type="typeof(Offcanvas_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component)" />
    <b>EmployeeDemoComponent2.razor</b>
    <Demo Type="typeof(EmployeeDemoComponent2)" ShowCodeOnly="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Placement" PageUrl="@pageUrl" Link="placement">
    <div class="mb-3">Try the top, bottom, and left examples out below.</div>
    <Demo Type="typeof(Offcanvas_Demo_03_Placement)" Tabs="true" />
</Section>

<Callout Type="CalloutColor.Info">Default placement for the offcanvas component is right.</Callout>

<Section Size="HeadingSize.H2" Name="Static backdrop" PageUrl="@pageUrl" Link="static-backdrop">
    <div class="mb-3">When <b>UseStaticBackdrop</b> is set to <b>true</b>, the offcanvas will not close when clicking outside of it.</div>
    <Demo Type="typeof(Offcanvas_Demo_04_Static_Backdrop)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Sizes" PageUrl="@pageUrl" Link="sizes">
    <div class="mb-3">Set the size of the <code>Offcanvas</code> with the Size parameter. The default value is <code>OffcanvasSize.Regular</code>.</div>
    <Demo Type="typeof(Offcanvas_Demo_05_Sizes_A_Small)" Tabs="true" />
    <Demo Type="typeof(Offcanvas_Demo_05_Sizes_B_Large)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Events" PageUrl="@pageUrl" Link="events">
    <div class="mb-3">Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.</div>
    <Demo Type="typeof(Offcanvas_Demo_06_Events)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Responsive" PageUrl="@pageUrl" Link="responsive">
    <div class="mb-3">Set the responsive behaviour of the <code>Offcanvas</code> with the Responsive parameter. The default value is <code>OffcanvasResponsive.Always</code>.</div>
    <div class="mb-3">Responsive offcanvas hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <code>OffcanvasResponsive.LargeDown</code> hides content in an offcanvas below the <code>lg</code> breakpoint, but shows the content above the <code>lg</code> breakpoint. Responsive offcanvas are available for each breakpoint.</div>
    <Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />
    <Callout Color="CalloutColor.Warning" Heading="NOTE">Both body and footer will be shown above the responsive breakpoint by default. Optionally use the FooterCssClass parameter to control visibility of the footer.</Callout>
</Section>

@code {
    private const string pageUrl = DemoRouteConstants.Demos_URL_Offcanvas;
    private const string pageTitle = "Blazor Offcanvas";
    private const string pageDescription = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.";
    private const string metaTitle = "Blazor Offcanvas Component";
    private const string metaDescription = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.";
    private const string imageUrl = "https://i.imgur.com/1vNz5Ci.jpg";
}