OffcanvasDocumentation.razor

@page "/offcanvas"

<PageTitle>@title</PageTitle>

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Offcanvas</h1>
<div class="lead mb-3">
    Build hidden sidebars into your project for navigation, shopping carts, and more with a offcanvas component.
</div>

<CarbonAds />

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

<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
<Demo Type="typeof(Offcanvas_Demo_01_Examples)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Dynamic component as offcanvas" PageUrl="@pageUrl" HashTagName="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" />

<SectionHeading Size="HeadingSize.H2" Text="Pass event callbacks to a dynamic component" PageUrl="@pageUrl" HashTagName="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" />

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

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

<SectionHeading Size="HeadingSize.H2" Text="Static backdrop" PageUrl="@pageUrl" HashTagName="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" />

<SectionHeading Size="HeadingSize.H2" Text="Sizes" PageUrl="@pageUrl" HashTagName="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" />

<SectionHeading Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="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" />

<SectionHeading Size="HeadingSize.H2" Text="Responsive" PageUrl="@pageUrl" HashTagName="responsive" />
<div class="mb-3">Blazor Bootstrap offcanvas component can implement responsiveness to show its content inline on larger devices and revert to default hidden behavior on smaller devices.  This example switches between the two responsive views at the lg breakpoint.</div>
<Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />

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