RouterTabs component (#5787)

* RouterTabs ongoing * RouterTabs | Able to set PageAttribute with title, cssclass, etc | Handle closing | Handle navigation on tab change * RouterTabs | Null checks * Adjust naming, regions, etc * Rename Title to Name * Router Tabs Demo example * Docs & ReleaseNotes | RouterTabs * Component Name in sidebar * Formating * Optimize examples and docs * Prefer to use just the DocsLayout to avoid layout refresh | Make Installation a Section for side nav detection * Add margin to close button --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Oct 22, 2024 · f279562 · f279562
1 parent 2c2379d
commit f279562
Show file tree

Hide file tree

Showing 34 changed files with 797 additions and 11 deletions.
diff --git a/Demos/Blazorise.Demo/App.razor b/Demos/Blazorise.Demo/App.razor
@@ -5,7 +5,9 @@
 <Blazorise.ThemeProvider Theme="@theme">
     <Router AppAssembly="typeof(App).Assembly">
         <Found Context="routeData">
-            <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+            <CascadingValue Value="routeData">
+                <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+            </CascadingValue>
         </Found>
         <NotFound>
             <p>Sorry, there's nothing at this address.</p>

diff --git a/Demos/Blazorise.Demo/Blazorise.Demo.csproj b/Demos/Blazorise.Demo/Blazorise.Demo.csproj
@@ -32,6 +32,12 @@
     <ProjectReference Include="..\Apps\TodoApp\TodoApp.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Pages\Tests\RouterTabsPage.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
   <PropertyGroup>
     <IsPackable>false</IsPackable>
   </PropertyGroup>

diff --git a/Demos/Blazorise.Demo/Components/SideMenu.razor b/Demos/Blazorise.Demo/Components/SideMenu.razor
@@ -317,6 +317,7 @@
                         <BarDropdownItem To="tests/transferlist">Transfer List</BarDropdownItem>
                         <BarDropdownItem To="tests/treeview">TreeView</BarDropdownItem>
                         <BarDropdownItem To="tests/video">Video</BarDropdownItem>
+                        <BarDropdownItem To="tests/routertabs">Router Tabs</BarDropdownItem>
                     </BarDropdownMenu>
                 </BarDropdown>
             </BarItem>

diff --git a/Demos/Blazorise.Demo/Config.cs b/Demos/Blazorise.Demo/Config.cs
@@ -1,6 +1,7 @@
 #region Using directives
 using Blazored.LocalStorage;
 using Blazorise.Captcha.ReCaptcha;
+using Blazorise.Components;
 using Blazorise.FluentValidation;
 using Blazorise.LoadingIndicator;
 using Blazorise.RichTextEdit;
@@ -31,8 +32,9 @@ public static IServiceCollection SetupDemoServices( this IServiceCollection serv
             .AddBlazoriseGoogleReCaptcha( options =>
             {
                 options.SiteKey = reCaptchaSiteKey;
-            } );
-
+            } )
+            .AddBlazoriseRouterTabs();
+
         services.AddBlazoredLocalStorage();
 
         services.AddValidatorsFromAssembly( typeof( App ).Assembly );

diff --git a/Demos/Blazorise.Demo/Layouts/MainLayout.razor.cs b/Demos/Blazorise.Demo/Layouts/MainLayout.razor.cs
@@ -6,7 +6,7 @@ namespace Blazorise.Demo.Layouts;
 
 public partial class MainLayout
 {
-    string layoutType = "fixed-header";
+    protected string layoutType = "fixed-header";
 
     protected override async Task OnInitializedAsync()
     {
@@ -22,7 +22,7 @@ private Task SelectCulture( string name )
         return Task.CompletedTask;
     }
 
-    Task OnThemeEnabledChanged( bool value )
+    protected Task OnThemeEnabledChanged( bool value )
     {
         if ( Theme == null )
             return Task.CompletedTask;
@@ -34,7 +34,7 @@ Task OnThemeEnabledChanged( bool value )
         return Task.CompletedTask;
     }
 
-    Task OnThemeGradientChanged( bool value )
+    protected Task OnThemeGradientChanged( bool value )
     {
         if ( Theme == null )
             return Task.CompletedTask;
@@ -51,7 +51,7 @@ Task OnThemeGradientChanged( bool value )
         return Task.CompletedTask;
     }
 
-    Task OnThemeRoundedChanged( bool value )
+    protected Task OnThemeRoundedChanged( bool value )
     {
         if ( Theme == null )
             return Task.CompletedTask;
@@ -63,7 +63,7 @@ Task OnThemeRoundedChanged( bool value )
         return Task.CompletedTask;
     }
 
-    Task OnThemeColorChanged( string value )
+    protected Task OnThemeColorChanged( string value )
     {
         if ( Theme == null )
             return Task.CompletedTask;

diff --git a/Demos/Blazorise.Demo/Layouts/RouterTabsLayout.razor b/Demos/Blazorise.Demo/Layouts/RouterTabsLayout.razor
@@ -0,0 +1,66 @@
+@inherits MainLayout
+
+@if ( layoutType == "fixed-header" )
+{
+    <Layout Sider>
+        <LayoutSider>
+            <LayoutSiderContent>
+                <SideMenu />
+            </LayoutSiderContent>
+        </LayoutSider>
+        <Layout>
+            <LayoutHeader Fixed>
+                <TopMenu ThemeEnabledChanged="@OnThemeEnabledChanged"
+                         ThemeGradientChanged="@OnThemeGradientChanged"
+                         ThemeRoundedChanged="@OnThemeRoundedChanged"
+                         ThemeColorChanged="@OnThemeColorChanged"
+                         @bind-LayoutType="@layoutType" />
+            </LayoutHeader>
+            <LayoutContent Padding="Padding.Is4.OnX">
+                <RouterTabs />
+            </LayoutContent>
+        </Layout>
+    </Layout>
+}
+else if ( layoutType == "fixed-header-footer-only" )
+{
+    <Layout>
+        <LayoutHeader Fixed>
+            <TopMenu ThemeEnabledChanged="@OnThemeEnabledChanged"
+                     ThemeGradientChanged="@OnThemeGradientChanged"
+                     ThemeRoundedChanged="@OnThemeRoundedChanged"
+                     ThemeColorChanged="@OnThemeColorChanged"
+                     @bind-LayoutType="@layoutType" />
+        </LayoutHeader>
+        <LayoutContent Padding="Padding.Is4.OnX">
+            <RouterTabs />
+        </LayoutContent>
+        <LayoutFooter Fixed>
+            <FooterMenu></FooterMenu>
+        </LayoutFooter>
+    </Layout>
+}
+else if ( layoutType == "sider-with-header-on-top" )
+{
+    <Layout>
+        <LayoutHeader Fixed>
+            <TopMenu ThemeEnabledChanged="@OnThemeEnabledChanged"
+                     ThemeGradientChanged="@OnThemeGradientChanged"
+                     ThemeRoundedChanged="@OnThemeRoundedChanged"
+                     ThemeColorChanged="@OnThemeColorChanged"
+                     @bind-LayoutType="@layoutType" />
+        </LayoutHeader>
+        <Layout Sider>
+            <LayoutSider>
+                <LayoutSiderContent>
+                    <SideMenu />
+                </LayoutSiderContent>
+            </LayoutSider>
+            <Layout>
+                <LayoutContent Padding="Padding.Is4.OnX">
+                    <RouterTabs />
+                </LayoutContent>
+            </Layout>
+        </Layout>
+    </Layout>
+}
diff --git a/Demos/Blazorise.Demo/Layouts/RouterTabsLayout.razor.cs b/Demos/Blazorise.Demo/Layouts/RouterTabsLayout.razor.cs
@@ -0,0 +1,10 @@
+using System.Threading.Tasks;
+using Blazorise.Localization;
+using Microsoft.AspNetCore.Components;
+
+namespace Blazorise.Demo.Layouts;
+
+public partial class RouterTabsLayout : MainLayout
+{
+
+}
diff --git a/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage.razor b/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage.razor
@@ -0,0 +1,20 @@
+@layout RouterTabsLayout
+@page "/tests/routertabs"
+@attribute [RouterTabsPageAttribute( Name: "Router Tabs", Closeable: false )]
+
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull">
+        <Paragraph>
+            This example uses a custom layout that replaces the body render with the RouterTabs component.
+            Each navigation using this custom layout will render a new tab with the content of the page.
+        </Paragraph>
+        <Paragraph>
+            Use the navigation links below to see the RouterTabs in action.
+        </Paragraph>
+        <UnorderedList>
+            <UnorderedListItem><Anchor To="/tests/routertabs">Router Tabs Page 1</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs2">Router Tabs Page 2</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs3">Router Tabs Page 3</Anchor></UnorderedListItem>
+        </UnorderedList>
+    </Column>
+</Row>
diff --git a/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage2.razor b/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage2.razor
@@ -0,0 +1,16 @@
+@layout RouterTabsLayout
+@page "/tests/routertabs2"
+@attribute [RouterTabsPageAttribute( Name: "Router Tabs 2", Closeable: true )]
+
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull">
+        <Paragraph>
+            The Router tabs example page 2
+        </Paragraph>
+        <UnorderedList>
+            <UnorderedListItem><Anchor To="/tests/routertabs">Router Tabs Page 1</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs2">Router Tabs Page 2</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs3">Router Tabs Page 3</Anchor></UnorderedListItem>
+        </UnorderedList>
+    </Column>
+</Row>
diff --git a/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage3.razor b/Demos/Blazorise.Demo/Pages/Tests/RouterTabsPage3.razor
@@ -0,0 +1,16 @@
+@layout RouterTabsLayout
+@page "/tests/routertabs3"
+@attribute [RouterTabsPageAttribute( Name: "Router Tabs 3", Closeable: true )]
+
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull">
+        <Paragraph>
+            The Router tabs example page 3
+        </Paragraph>
+        <UnorderedList>
+            <UnorderedListItem><Anchor To="/tests/routertabs">Router Tabs Page 1</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs2">Router Tabs Page 2</Anchor></UnorderedListItem>
+            <UnorderedListItem><Anchor To="/tests/routertabs3">Router Tabs Page 3</Anchor></UnorderedListItem>
+        </UnorderedList>
+    </Column>
+</Row>
diff --git a/Documentation/Blazorise.Docs.Server/Startup.cs b/Documentation/Blazorise.Docs.Server/Startup.cs
@@ -4,6 +4,7 @@
 using Blazored.LocalStorage;
 using Blazorise.Bootstrap5;
 using Blazorise.Captcha.ReCaptcha;
+using Blazorise.Components;
 using Blazorise.Docs.Core;
 using Blazorise.Docs.Models;
 using Blazorise.Docs.Options;
@@ -58,7 +59,8 @@ public void ConfigureServices( IServiceCollection services )
                 options.UseTables = true;
             } )
             .AddBlazoriseFluentValidation()
-            .AddBlazoriseGoogleReCaptcha( x => x.SiteKey = Configuration[key: "ReCaptchaSiteKey"] );
+            .AddBlazoriseGoogleReCaptcha( x => x.SiteKey = Configuration[key: "ReCaptchaSiteKey"] )
+            .AddBlazoriseRouterTabs();
 
         services.Configure<AppSettings>( options => Configuration.Bind( options ) );
         services.AddHttpClient();

diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor
@@ -259,6 +259,9 @@
                                         <DocsNewFeatureBadge>PdfViewer</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/richtextedit">RichTextEdit</BarDropdownItem>
+                                    <BarDropdownItem To="docs/extensions/routertabs" Flex="Flex.JustifyContent.Between">
+                                        <DocsNewFeatureBadge>RouterTabs</DocsNewFeatureBadge>
+                                    </BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/selectlist">SelectList</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/sidebar">Sidebar</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/signaturepad">SignaturePad</BarDropdownItem>
@@ -384,7 +387,13 @@
                 <Container Breakpoint="Breakpoint.Widescreen">
                     <Row>
                         <Column ColumnSize="ColumnSize.Is12.Is10.OnDesktop" Class="b-docs-page">
-                            @Body
+                            @if ( isRouterTabsExample )
+                            {
+                                <RouterTabs />
+                            }
+                            else{
+                                @Body
+                            }
                         </Column>
                         <Column ColumnSize="ColumnSize.Is2.OnDesktop">
                             <Toc />

diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor.cs b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor.cs
@@ -41,6 +41,8 @@ public partial class DocsLayout : IDisposable
 
     public string selectedSearchText { get; set; }
 
+    private bool isRouterTabsExample;
+
     #endregion
 
     #region Methods
@@ -56,6 +58,12 @@ protected override async Task OnInitializedAsync()
 
     private async void OnLocationChanged( object sender, LocationChangedEventArgs e )
     {
+        var isRouterTabsPage = e.Location.Contains( "routertabs" );
+        if (isRouterTabsExample != isRouterTabsPage )
+        {
+            isRouterTabsExample = isRouterTabsPage;
+            StateHasChanged();
+        } 
         await JSRuntime.InvokeVoidAsync( "blazoriseDocs.navigation.scrollToTop" );
     }
 

diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -10099,6 +10099,31 @@ public async Task OnSave()
     options.UseTables = true;
 } )";
 
+        public const string RouterTabsAppExample = @"<Router AppAssembly=""typeof(App).Assembly"">
+    <Found Context=""routeData"">
+        <CascadingValue Value=""routeData"">
+            <RouteView RouteData=""routeData"" DefaultLayout=""typeof(MainLayout)"" />
+        </CascadingValue>
+    </Found>
+    <NotFound>
+        <p>Sorry, there's nothing at this address.</p>
+    </NotFound>
+</Router>";
+
+        public const string RouterTabsLayoutExample = @"@inherits LayoutComponentBase
+
+<Div Class=""layout"">
+    <RouterTabs />
+</Div>";
+
+        public const string RouterTabsPageAttributeExample = @"@attribute [RouterTabsPageAttribute( Name: ""Example"", Closeable: true )]";
+
+        public const string RouterTabsRegisterServicesExample = @"using Blazorise.Components;
+
+builder.Services
+	.AddBlazorise()
+	.AddBlazoriseRouterTabs();";
+
         public const string SelectListExample = @"<SelectList TItem=""MyCountryModel""
             TValue=""int""
             Data=""@IndexedCountries""

diff --git a/...Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsAppExample - CopyCode.html b/...Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsAppExample - CopyCode.html
@@ -0,0 +1,14 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Router</span> <span class="htmlAttributeName">AppAssembly</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">typeof(App).Assembly</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Found</span> <span class="htmlAttributeName">Context</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CascadingValue</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RouteView</span> <span class="htmlAttributeName">RouteData</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span> <span class="htmlAttributeName">DefaultLayout</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">typeof(MainLayout)</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CascadingValue</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Found</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">NotFound</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">p</span><span class="htmlTagDelimiter">&gt;</span>Sorry, there&#39;s nothing at this address.<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">p</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">NotFound</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Router</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...tation/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsAppExampleCode.html b/...tation/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsAppExampleCode.html
@@ -0,0 +1,14 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Router</span> <span class="htmlAttributeName">AppAssembly</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">typeof(App).Assembly</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Found</span> <span class="htmlAttributeName">Context</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CascadingValue</span> <span class="htmlAttributeName">Value</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RouteView</span> <span class="htmlAttributeName">RouteData</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">routeData</span><span class="quot">&quot;</span> <span class="htmlAttributeName">DefaultLayout</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">typeof(MainLayout)</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CascadingValue</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Found</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">NotFound</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">p</span><span class="htmlTagDelimiter">&gt;</span>Sorry, there&#39;s nothing at this address.<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">p</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">NotFound</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Router</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...ion/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsLayoutExampleCode.html b/...ion/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsLayoutExampleCode.html
@@ -0,0 +1,9 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="atSign">&#64;</span>inherits LayoutComponentBase
+
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Div</span> <span class="htmlAttributeName">Class</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">layout</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">RouterTabs</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Div</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...zorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsPageAttributeExampleCode.html b/...zorise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsPageAttributeExampleCode.html
@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="atSign">&#64;</span>attribute [RouterTabsPageAttribute( Name: &quot;Example&quot;, Closeable: true )]
+</pre></div>
+</div>
diff --git a/...ise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsRegisterServicesExampleCode.html b/...ise.Docs/Pages/Docs/Extensions/RouterTabs/Code/RouterTabsRegisterServicesExampleCode.html
@@ -0,0 +1,9 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+using Blazorise.Components;
+
+builder.Services
+	.AddBlazorise()
+	.AddBlazoriseRouterTabs();
+</pre></div>
+</div>
diff --git a/...ion/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Examples/RouterTabsAppExample.snippet b/...ion/Blazorise.Docs/Pages/Docs/Extensions/RouterTabs/Examples/RouterTabsAppExample.snippet
@@ -0,0 +1,10 @@
+<Router AppAssembly="typeof(App).Assembly">
+    <Found Context="routeData">
+        <CascadingValue Value="routeData">
+            <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+        </CascadingValue>
+    </Found>
+    <NotFound>
+        <p>Sorry, there's nothing at this address.</p>
+    </NotFound>
+</Router>