Offcanvas

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor.orig

@@ -0,0 +1,64 @@
+@page "/charts/line-chart"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Line Chart</h1>
+<div class="lead mb-3">
+  A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+  It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+</div>
+
+<CarbonAds />
+
+<SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
+<div class="mb-3">
+  Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+</div>
+
+<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
+<div class="mb-3">
+  In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
+</div>
+<Callout Heading="TIP" Color="CalloutColor.Success">
+  For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
+  These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+</Callout>
+<Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
+<div class="my-3"></div>
+<Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
+<div class="my-3">
+  By default, the chart is using the default locale of the platform on which it is running.
+  In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
+</div>
+<Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Add data dynamically for a specific dataset" PageUrl="@pageUrl" HashTagName="add-data-dynamically-for-a-specific-dataset" />
+<Demo Type="typeof(LineChart_Demo_03_Dynamically_add_data)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
+<Demo Type="typeof(LineChart_Demo_04_Datalabels)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Tick Configuration" PageUrl="@pageUrl" HashTagName="tick-configuration" />
+<Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
+<Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
+
+<<<<<<< HEAD
+<SectionHeading Size="HeadingSize.H4" Text="Time Axis" PageUrl="@pageUrl" HashTagName="time-axis" />
+<Demo Type="typeof(LineChart_Demo_07_Time_Axis)" Tabs="true" />
+=======
+<SectionHeading Size="HeadingSize.H4" Text="(Custom) Plugins" PageUrl="@pageUrl" HashTagName="plugins" />
+<Demo Type="typeof(LineChart_Demo_08_Plugins)" Tabs="true" />
+>>>>>>> pr-chartjs-plugins
+
+@code {
+  private readonly string pageUrl = "/charts/line-chart";
+  private readonly string title = "Blazor Line Chart";
+  private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+  private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor

@@ -6,7 +6,7 @@
 
 <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.
+  Build hidden sidebars into your project for navigation, shopping carts, and more with a offcanvas component.
 </div>
 
 <CarbonAds />
@@ -19,7 +19,7 @@
 <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.
+  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>
@@ -28,12 +28,12 @@
 <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>    
+  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>
@@ -45,9 +45,9 @@
 
 <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="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>
@@ -58,9 +58,21 @@
 <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";
+  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";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_04_Backdrops.razor

@@ -0,0 +1,28 @@
+@foreach( var backdrop in backdropTypes )
+{
+  offcanvas.TryAdd( backdrop, default! );
+  <Offcanvas @ref="offcanvas[ backdrop ]" Title="Offcanvas title" Backdrop="@backdrop">
+    <BodyTemplate>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.</p>
+      <p>Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.</p>
+      <p>Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.</p>
+      <p>Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.</p>
+      <p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
+    </BodyTemplate>
+    <FooterTemplate>
+      <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas[backdrop].HideAsync()">Close</Button>
+    </FooterTemplate>
+  </Offcanvas>
+}
+
+@foreach( var backdrop in backdropTypes )
+{
+  <Button Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick(backdrop)">Show offcanvas @backdrop</Button>
+}
+
+@code {
+  private IEnumerable<Offcanvas.BackdropType> backdropTypes = Enum.GetValues( typeof( Offcanvas.BackdropType ) ).Cast<Offcanvas.BackdropType>();
+  private Dictionary<Offcanvas.BackdropType, Offcanvas> offcanvas = new();
+
+  private async Task OnShowOffcanvasClick( Offcanvas.BackdropType backdrop ) => await offcanvas[ backdrop ].ShowAsync();
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Scrollable.razor

@@ -0,0 +1,12 @@
+<Offcanvas @ref="offcanvas" Title="Scrollable offcanvas" IsScrollable="true">
+  <BodyTemplate>...</BodyTemplate>
+</Offcanvas>
+
+<Button Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick()">Show scrollable canvas</Button>
+<p>After showing the canvas, note how you can still scroll this page and interact with it.</p>
+
+@code {
+  private Offcanvas offcanvas = default!;
+
+  private async Task OnShowOffcanvasClick() => await offcanvas.ShowAsync();
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_08_Bind_IsVisible.razor

@@ -0,0 +1,20 @@
+<Offcanvas Title="IsVisible binding" @bind-IsVisible="IsVisible" Backdrop="Offcanvas.BackdropType.None">
+  <BodyTemplate>
+    <Switch @bind-Value="IsVisible" Label="Toggle offcanvas" />
+
+    Note that no @@ref is needed to bind the property.
+  </BodyTemplate>
+</Offcanvas>
+
+<div>
+  The offcanvas is <b>@(IsVisible ? "visible" : "hidden")</b>.
+
+  <Button Color="ButtonColor.Primary" @onclick="_ => IsVisible = true">Show Offcanvas</Button>
+</div>
+<div>
+  <Switch @bind-Value="IsVisible" Label="Toggle offcanvas" />
+</div>
+
+@code {
+  public bool IsVisible { get; set; }
+}