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="Backdrop options" PageUrl="@pageUrl" HashTagName="backdrops" />
<div class="mb-3">When <b>Backdrop</b> is set to <b>Offcanvas.BackdropType.Static</b>, the offcanvas will not close when clicking outside of it.</div>
<Demo Type="typeof(Offcanvas_Demo_04_Backdrops)" 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="Scrollable" PageUrl="@pageUrl" HashTagName="static-backdrop" />
<div class="mb-3">When <b>IsScrollable</b> to <b>true</b> the page will be scrollable and interactable below the offcanvas backdrop.</div>
<div class="mb-3">
  <Alert Color="AlertColor.Warning">Note: This demo does not work because the main viewport has <code>overflow: hidden</code> set in the CSS.</Alert>
</div>
<Demo Type="typeof(Offcanvas_Demo_07_Scrollable)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Bind IsVisible" PageUrl="@pageUrl" HashTagName="static-backdrop" />
<div class="mb-3">You can read <code>IsVisible</code> to get the current status and use <code>@@bind-IsVisible</code> to toggle the offcanvas with a switch.</div>
<Demo Type="typeof(Offcanvas_Demo_08_Bind_IsVisible)" 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";
}