あなたがデフォルトのナビゲーションバーをSyncFusionのBlazorサイドバーと交換するべき5つの理由

ほぼすべてのアプリケーションは、より良いレベルのメニューを整理し、アプリケーションを簡単に移動するナビゲーションシステムが必要です.Blazorはデフォルトのナビゲーションを持っているが、それはしばしば期待に足りず、あなたのアプリを時代遅れに見えるようにすることができます.あなたがこの問題を抱えていて、デフォルトナビゲーションを取り替えることについて考えたならば、このポストはあなたのためです.
統合Blazor Sidebar 拡張可能で折り畳み可能なコンポーネントです.これは通常、主なコンテンツと一緒にプライマリまたはセカンダリコンテンツを配置する側のコンテナとして動作します.これは、柔軟なオプションを表示し、ユーザーの相互作用に基づいて非表示に提供します.
サイバーバーコンポーネント
このブログ記事では、デフォルトのナビゲーションよりも優れたBlather orサイドバーの5つの主要な機能が表示されます.

Different types of transitions

HTML side content position

HTML slide panel content docking

Sidebar menu toggling

Mobile-friendly side navigation menu

遷移の種類
ブレザーサイドバーのスライドアウトの切り替えの種類は、ユーザーが柔軟性を表示したり、コンテンツを非表示にするか、メインコンテンツの上にプッシュ、スライド、またはそれをオーバーレイして非表示にします.

注意:Customizing the different types of sidebar documentation .

HTMLサイドコンテンツの位置
サイドバーは、アプリケーションの左右、または両側に配置することができます.これは、同時にプライマリとセカンダリコンテンツの両方を見るのを助けます.
位置に基づいてサイドバーをカスタマイズする
注意:詳細はCustomizing the sidebar based on position ドキュメント.

HTMLスライドパネルの内容を追加
あなたはクイックリファレンス、メニュー、リスト、およびツリービューのようなクイックアクセスと簡単なナビゲーションのサイドバーのHTMLコンテンツやコンポーネントの任意のタイプを配置することができます.また、ターゲット要素を使用して、コンテキスト要素を設定して、body要素から離れた任意のHTML要素内のサイドバーを初期化します.
注意:詳細はSidebar for specific content in Blazor Sidebar Component ドキュメント.
あなたがサイドコンテンツをドックするとき、それはメインコンテンツをより多くのスペースを与える.ナビゲーションテキストは、次のようなアイコンの短縮ビューになります.GIF画像.
炎のサイドバーでドッキング
注意:詳細はDocking in Blazor Sidebar Component ドキュメント.

サイドバーメニューの切り替え
また、すべての要素(ハンバーガーメニューやボタン)にサイドバーを切り替えるには任意のカスタムアクションをバインドすることができます.
バザーサイドバー

モバイルフレンドリーサイドナビゲーションメニュー
Blazorサイドバーのコンポーネントは、モバイルとデスクトップ画面で異なる動作します.その応答モードでは、モバイルデバイス用の適応、再設計されたUIの外観を提供します.
また、メディアのプロパティを使用して解像度に応じてサイドバーの展開と崩壊状態をカスタマイズすることもできます.
サイドフレンドリーなサイドナビゲーションメニュー
注意:詳細はResponsive Sidebar in Blazor Sidebar Component ドキュメント.
これまで、我々は我々のBlazorサイドバー構成要素の特徴を見ました.
さて、2つの簡単な手順でデフォルトのナビゲーションをBlazorサイドバーに置き換える方法を見てみましょう!

デフォルトのナビゲーションをSyncFusion
アプリケーション内のデフォルトのナビゲーションサイドバーの代わりにSyncFusion Blakes SideBarを初期化するには、次の手順に従ってください.
ステップ1.ブレザー.この機能を参照して、Bladeorアプリケーションのパッケージをnuuパッケージ化しますdocumentation .
次に、メインレイアウトからサイドバー要素の次のコードを削除します.かみそりページ.

@using Syncfusion.Blazor.Navigations

<div class="dock">
  <ul>
    <li class="sidebar-item" id="toggle" @onclick="@Toggle">                           
        <span class="e-icons expand"></span>
        <span class="e-text" title="menu">Menu</span>
    </li>
    <li class="sidebar-item">
        <span class="e-icons home"></span>
        <span class="e-text" title="home">Home</span>
    </li>
    <li class="sidebar-item">
        <span class="e-icons profile"></span>
        <span class="e-text" title="profile">Profile</span>
    </li>
    <li class="sidebar-item">
        <span class="e-icons info"></span>
        <span class="e-text" title="info">Info</span>
     </li>
     <li class="sidebar-item">
        <span class="e-icons settings"></span>
        <span class="e-text" title="settings">Settings</span>
     </li>
   </ul>
</div>
@code {

    [Parameter]
    public SfSidebar SidebarInstance { get; set; }

    public void Toggle()
    {
        SidebarInstance.Toggle();
    }

}

次に、メインレイアウト内のSFSideBarに次のコードを含める.かみそりファイル.

@inherits LayoutComponentBase
@using Syncfusion.Blazor.Navigations

<SfSidebar Width="220px" DockSize="72px" EnableDock="true" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">
  <ChildContent>
    <NavMenu SidebarInstance="Sidebar">
    </NavMenu>               
  </ChildContent>
</SfSidebar>

<div id="main-content container-fluid col-md-12">
  <div class="title">Main content</div>
  <div class="sub-title">
    <p>Click the expand icon to open and collapse icon to close the sidebar</p>

  </div>
</div>   

@code{

  SfSidebar Sidebar;

       Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
    {
        {"class", "dockSidebar" }
    };
}
<style>
    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }
    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }
    #wrapper .sub-title .column {
        display: inline-block;
        padding: 10px;
    }
    /* custom code start */
    .center {
        text-align: center;
        display: none;
        font-size: 13px;
        font-weight: 400;
        margin-top: 20px;
    }
    .sb-content-tab .center {
        display: block;
    }
    /* custom code end */
    /* end of content area styles */
    /* Sidebar styles */
    .dockSidebar.e-sidebar.e-right.e-close {
        visibility: visible;
        transform: translateX(0%);
    }
    .dockSidebar .e-icons::before {
        font-size: 25px;
    }
    /* dockbar icon Style */
    .dockSidebar .home::before {
        content: '\e102';
    }
    .dockSidebar .profile::before {
        content: '\e10c';
    }
    .dockSidebar .info::before {
        content: '\e11b';
    }
    .dockSidebar .settings::before {
        content: '\e10b';
    }
    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
    }
    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
    }
    /* end of dockbar icon Style */
    .dockSidebar.e-close .sidebar-item {
        padding: 5px 20px;
    }
    .dockSidebar.e-dock.e-close span.e-text {
        display: none;
    }
    .dockSidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }
    .dockSidebar li {
        list-style-type: none;
        cursor: pointer;
    }
    .dockSidebar ul {
        padding: 0px;
    }
    .dockSidebar.e-sidebar ul li:hover span {
        color: white
    }
    .dockSidebar span.e-icons {
        color: #c0c2c5;
        line-height: 2
    }
    .e-open .e-icons {
        margin-right: 16px;
    }
    .e-open .e-text {
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 23px;
        font-size: 15px;
    }
    .sidebar-item {
        text-align: center;
        border-bottom: 1px solid rgba(229, 229, 229, 0.54);
    }
    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #c0c2c5;
    }
    .dockSidebar.e-sidebar {
        background: #2d323e;
        overflow: hidden;
    }
    app {   
    display: inherit;
    }

    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

</style>

下記を参照.GIF画像.
デフォルトのナビゲーションをSyncFusionのBlather orサイドバーコンポーネントに置き換える

Githubリファレンス
また、完全なデモをダウンロードすることができますReplace the Default Navigation with the Syncfusion Blazor Sidebar .

結論
このブログでは、デフォルトのナビゲーションをsyncfusionBlazor Sidebar コンポーネント.それらを試してみて、このブログ記事のコメントセクションであなたのフィードバックを残す!
私たちのサイドバーコンポーネントはまた、我々のASPで利用可能です.正味のCore , MVC ), JavaScript , Angular , React , and Vue のりば
既存の顧客については、新しいバージョンはLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 当社の利用可能な機能をチェックアウトします.また、このサンプルを試してGitHub ロケーション.
また、私たちを介してお問い合わせすることができますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!
このブログ記事が好きなら、次の記事も好きになると思います.

〔ブログ〕

〔ブログ〕

〔ブログ〕

Blazor WebAssembly Succinctly ［電子ブック］

Blazor Succinctly ［電子ブック］