sgcUI sgcNavigation を今すぐ利用できます

sgcNavigation. すべてのページへ。レールにたたむ。

アプリケーションに、モダンなナビゲーションメニューを数分で。1 つのコントロールがサイドバーにもアコーディオンにもなり、なめらかなアニメーションでアイコンレールにたたまれ、未読数をバッジで表示し、キーボードだけで完全に操作できます。ライトテーマとダークテーマを標準で内蔵しています。

体験版をダウンロード sgcNavigation を詳しく見る

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7～13

21 つのコントロールで使えるナビゲーションスタイル。サイドバーとアコーディオン
~150 msバーをアニメーション付きでアイコンレールにたたむ時間
220 / 56論理ピクセル。既定の展開時と折りたたみ時の幅
5UI フレームワーク: VCL、FireMonkey、WinForms、WPF、Avalonia

アプリのメニューに必要なすべてを。

ページの一覧を、ユーザーがすぐに使いこなせるナビゲーションシェルに変える 10 の機能を、あらゆるフレームワークで。

2 つのスタイル、1 つのコントロール
同じアイテムとイベントのまま、サイドバーとアコーディオンを 1 つのプロパティで切り替えられます。
すべての UI フレームワーク
VCL、FireMonkey、WinForms、WPF、Avalonia に、同じモデルと同じ名前で対応します。
スイートと調和
ライトテーマとダークテーマ、そしてすべての sgcUI 製品と共有するアクセントカラー。
ウィンドウなしの出力
同じバーを、ウィンドウなしで PNG や SVG に描画できます。Linux64 にも対応します。

動かして確かめる。

体験版に同梱されている sgcNavigation のデモから取得しました。

SidebarApp デモ。Workspace と Business のグループに 8 つのアイテムを持つサイドバーで、Dashboard が選択され、右側に 2 枚の KPI カードが表示されています

レイアウトとモード

モダンなアプリ用サイドバーを 1 つのコンポーネントで。

フォームに TsgcVCLNavigationBar を置き、左側に配置してアイテムを追加します。 IsGroup を指定すると、アイテムがグループヘッダーになります。
選択した行にはアクセントカラーの背景と 3 ピクセルのアクセントバーが付き、ユーザーは常に現在位置を把握できます。
OnSelectionChange は対応するページを表示します。たとえば SidebarApp デモのように、タブを非表示にした TPageControl で切り替えます。

AllowMultiExpand を指定した Mode = nbmAccordion。Sales と Inventory が開き、Admin は閉じています

アコーディオン

プロパティ 1 つでアコーディオンに切り替えます。

Mode := nbmAccordion は、すべてのグループヘッダーを、その下のアイテムを開閉するセクションにします。
既定では一度に開くグループは 1 つだけです。 AllowMultiExpand を指定すると、複数のセクションを同時に開いたままにできます。
アイテム、イベント、そしてあなたのコードはまったく同じままで、どちらのモードも折りたたみ状態のアイコンレールにたためます。

アイテムに Badge を設定して未読数を表示: Inbox 12、Tasks 3、Alerts 1

情報を伝えるアイテム

バッジ、アイコン、そして独自の TAction。

Badge は、未読数や New のような語をアクセントカラーのピル型で描画し、折りたたんだレールでは点で表示します。
ImageIndex は、すでにお使いのイメージリストからアイコンを選びます。または Glyph は、イメージリストなしで文字を描画します。
Action は、アイテムを VCL または FireMonkey の TActionに結びつけます。.NET では同じ役割を Commandが担います。

左は TsgcVCLNavigationBar、右は sgcNavigationSaveToSVG が書き出した同じバーを Edge で表示した様子

キーボード、テーマ、出力

ウィンドウなしでバーを描画します。

sgcNavigationSaveToPNG と sgcNavigationSaveToSVG は、ウィンドウも VCL や FireMonkey も使わずにモデルを描画します。
レンダラーは Linux64 を含むすべてのプラットフォームでビルドできるため、コンソールプログラム、サービス、サーバーでも同じバーを描画できます。
scale パラメーターで高 DPI 画面向けの鮮明な画像が得られ、同じアイコンはお使いのイメージリストから供給されます。

sgcNavigation のその他の機能。

テーマ、アイコン、キーボードフォーカス、SidebarApp シェルを、デモからそのままご覧ください。

同じアイテム、バッジ、選択状態のバーを utLight と utDark のテーマで表示 — 1 つのプロパティでバーを `utLight` と `utDark`の間で切り替えられます。 `AccentColor` は、ブランドカラーを反映します。

左: ImageIndex 経由の TImageList のアイコン。右: イメージリストなしで、アイテムごとに Glyph の文字を表示 — `ImageIndex` は `TImageList`からアイコンを選びます。 `Glyph` は、イメージリスト不要で文字を描画します。

キーボード優先のナビゲーション: Dashboard が選択され、点線のフォーカス枠は Tasks にあります — 上、下、Home、End、Enter、Space でバー内を移動し、左と右でアコーディオンのグループを折りたたみます。

ライトテーマの SidebarApp。Inbox と Reports のバッジ、無効化された Billing アイテム、sgcDashboard の KPI ページ付き — SidebarApp: バッジ、無効なアイテム、選択に応じて切り替わる sgcDashboard の KPI ページ。

数行でナビゲーションバーを。

グループ、バッジ、無効なアイテム、Collapse ボタンを備えたアコーディオンバー。Delphi、C++ Builder、C# で同じ API です。

dotnet add package esegece.sgcNavigation.WinForms

C++ Builder 版と C# 版

procedure TMainForm.CreateNavigation;
begin
  // an accordion bar on the left, dark theme, several groups open at once
  FNav := TsgcVCLNavigationBar.Create(Self);
  FNav.Parent := Self;
  FNav.Align := alLeft;
  FNav.Mode := nbmAccordion;
  FNav.AllowMultiExpand := True;
  FNav.Theme := utDark;
  // a group header (third parameter True), then the items under it
  FNav.Items.AddItem('Sales', '', True);
  FNav.Items.AddItem('Orders', 'O');
  FNav.Items.AddItem('Invoices', 'I').Badge := '3';
  FNav.Items.AddItem('Admin', '', True);
  FNav.Items.AddItem('Users', 'U').Hint := 'Manage the users';
  FNav.Items.AddItem('Billing', 'B').Enabled := False;
  FNav.SelectedIndex := 1;
  FNav.OnSelectionChange := NavSelectionChange;
  FNav.AnimateCollapse := True;
end;

procedure TMainForm.ButtonClick(Sender: TObject);
begin
  // fold the bar into an icon rail, with an animation
  FNav.Collapsed := not FNav.Collapsed;
end;