Delphi, C++ Builder & .NET sgcUI 구성 제품

sgcNavigation, Delphi, C++ Builder & .NET용 사이드바 및 아코디언 내비게이션 바

몇 분 만에 애플리케이션에 현대적인 내비게이션 메뉴를 추가하세요. 컨트롤 하나가 사이드바도 되고 아코디언도 되며, 부드러운 애니메이션과 함께 아이콘 레일로 접히고, 읽지 않은 개수를 배지로 표시하며, 키보드만으로 완전히 조작할 수 있습니다. 라이트 및 다크 테마가 기본 제공됩니다.

VCL, FireMonkey, WinForms, WPF, AvaloniaDelphi 7부터 13, C++ Builder 2007부터 13무료 .NET Community 에디션sgcUI Standard에 포함
Workspace와 Business 그룹에 항목 8개가 있는 사이드바, Dashboard가 선택되어 있고 오른쪽에 KPI 카드 두 개가 표시된 SidebarApp 데모

앱 메뉴에 필요한 모든 것

페이지 목록을 사용자가 바로 길을 찾을 수 있는 내비게이션 셸로 만들어 주는 기능 10가지입니다.

레이아웃과 모드

컨트롤 하나로 업무용 애플리케이션이 사용하는 두 가지 내비게이션 스타일과 그 사이의 좁은 레일을 모두 지원합니다.

컴포넌트 하나로 만드는 현대적인 앱 사이드바

레이아웃과 모드

컴포넌트 하나로 만드는 현대적인 앱 사이드바

대부분의 업무용 애플리케이션은 메인 폼의 왼쪽 가장자리에 같은 것을 필요로 합니다. 영역별로 묶인 페이지 목록과 현재 페이지의 분명한 표시입니다. 폼에 TsgcVCLNavigationBar를 놓고 왼쪽으로 정렬한 다음 항목을 추가하세요. 그룹 헤더는 아래 행들의 제목 역할을 하며 흐린 색으로 표시되고 선택되지 않습니다. 선택된 행에는 강조색 배경과 3픽셀 강조 막대가 표시되어 사용자가 현재 위치를 항상 알 수 있습니다. 마우스 오버와 누름 상태, 힌트, 비활성 행도 모두 자동으로 그려지므로 처음 실행할 때부터 완성된 모습입니다.

  • Mode := nbmSidebar가 기본 스타일입니다
  • IsGroup은 항목을 그룹 헤더로 바꿉니다
  • ItemHeight와 GroupHeight로 행 높이를 설정합니다
  • 마우스 휠로 긴 목록을 스크롤하고 ScrollIntoView로 원하는 항목을 표시합니다
  • 아랍어와 히브리어를 위한 오른쪽에서 왼쪽 지원: 아이콘과 캡션의 위치가 서로 바뀌고, 들여쓰기, 화살표 표시, 배지, 접기 버튼이 미러링됩니다
도움말 항목 읽기
속성 하나로 아코디언으로 전환

레이아웃과 모드

속성 하나로 아코디언으로 전환

설정 화면과 관리 콘솔은 화면에 다 들어가지 않을 만큼 섹션이 많은 경우가 흔합니다. Mode를 nbmAccordion으로 설정하면 모든 그룹 헤더가 아래 항목을 열고 닫는 섹션이 되며, 오른쪽에 화살표가 표시되고 하위 항목은 들여쓰기됩니다. 기본적으로는 한 번에 그룹 하나만 열려 있어 긴 메뉴가 짧게 유지됩니다. 사용자가 여러 섹션을 동시에 열어야 한다면 AllowMultiExpand를 설정하세요. 항목, 이벤트, 코드는 그대로 유지됩니다. 첫 번째 헤더 앞에 놓인 항목은 어떤 그룹에도 속하지 않고 항상 표시되므로, 섹션 위에 Home이나 Dashboard 항목을 두기에 적합합니다.

  • Mode := nbmAccordion으로 바 전체를 전환합니다
  • Expanded로 코드에서 그룹을 열거나 닫습니다
  • AllowMultiExpand로 여러 그룹을 열어 둘 수 있습니다
  • Indent로 하위 항목의 들여쓰기를 설정합니다
도움말 항목 읽기

레이아웃과 모드

애니메이션과 함께 아이콘 레일로 접기

넓은 사이드바는 사용자가 보려고 한 데이터의 공간을 차지합니다. Collapsed를 설정하면 바가 펼쳐진 너비에서 좁은 아이콘 레일로 약 150ms 만에 접힙니다. 레일에서는 아이콘만 그려지고, 캡션은 힌트가 되며, 그룹 헤더는 구분선으로, 배지는 점으로 바뀌므로 중요한 정보는 사라지지 않습니다. 바가 자체 너비를 설정하므로 옆의 콘텐츠는 alClient로 자연스럽게 따라옵니다. Collapsed 속성을 햄버거 버튼, 사용자 설정 또는 폼의 너비에 연결하면 사이드바 모드와 아코디언 모드 모두에서 레일이 같은 방식으로 열리고 닫힙니다.

  • Collapsed로 두 가지 너비를 전환합니다
  • 논리 픽셀 단위의 ExpandedWidth(220)와 CollapsedWidth(56)
  • AnimateCollapse로 애니메이션을 켜거나 끕니다
  • OnCollapsedChange는 레일이 열리거나 닫힐 때 알려 줍니다
도움말 항목 읽기

레이아웃과 모드

선택에 따라 페이지 전환

내비게이션 바는 사용자가 보는 화면을 전환할 때 비로소 쓸모가 있습니다. 활성화된 항목을 클릭하거나 탭하면 바가 이를 선택하고 OnItemClick을 발생시킨 다음 항목의 OnClick을 실행합니다. OnSelectionChange는 일치하는 페이지를 표시하는 단 하나의 위치이며, 예를 들어 탭이 숨겨진 TPageControl의 탭이 있습니다. SidebarApp 데모가 바로 이렇게 만들어져 있습니다. SelectedIndex로 코드에서 현재 페이지를 읽고 설정합니다. 사용자가 아직 접근할 수 없는 항목은 비활성화하고 힌트에 이유를 설명하거나, 보면 안 되는 역할에게는 숨기더라도 선택 로직은 계속 정상적으로 동작합니다.

  • SelectedIndex는 사용자가 선택한 페이지입니다
  • OnSelectionChange로 페이지나 프레임을 전환합니다
  • 바의 OnItemClick과 항목별 OnClick
  • 항목별 Enabled, Hint, Visible
도움말 항목 읽기

정보를 알려 주는 항목

행에는 캡션 이상이 담깁니다. 아이콘, 개수, 그리고 이미 작성한 로직으로 연결되는 링크입니다.

읽지 않은 개수를 알리는 배지

정보를 알려 주는 항목

읽지 않은 개수를 알리는 배지

사용자는 페이지를 열기 전에 주의가 필요한 것이 있음을 알아야 합니다. 항목에 읽지 않은 개수나 New 같은 단어를 Badge로 지정하면 바가 행의 오른쪽에 강조색 알약 모양으로 그리며, 글자는 더 잘 읽히는 검정 또는 흰색으로 표시됩니다. 값이 바뀔 때마다 코드에서 설정하면 바가 스스로 다시 그려집니다. 접힌 레일에서는 배지가 아이콘 위의 점이 됩니다. 배지는 일반 텍스트이므로 사용자 지정 그리기 코드 없이 같은 속성으로 개수, 짧은 라벨, 상태 문구를 모두 다룰 수 있습니다.

  • Badge는 항목별 짧은 텍스트입니다
  • 빈 Badge는 아무것도 그리지 않습니다
  • 알약은 테마 강조색 또는 사용자의 AccentColor를 사용합니다
  • Hint와 함께 사용해 개수를 설명합니다
도움말 항목 읽기
이미지 목록 또는 글리프 아이콘

정보를 알려 주는 항목

이미지 목록 또는 글리프 아이콘

모든 행에는 아이콘 자리가 있습니다. 이미 사용 중인 이미지 목록을 바에 지정하고 항목마다 ImageIndex를 설정하면, 마스크 또는 32비트 이미지는 한 번 변환되어 목록이 바뀔 때까지 캐시됩니다. 아직 이미지 목록이 없다면 대신 Glyph를 설정하세요. 테마 색상을 따르는 문자 또는 짧은 기호이며 데모가 바로 이런 모습입니다. 비활성 항목은 이미지를 40퍼센트 불투명도로 그려 상태를 한눈에 알 수 있습니다. 둘을 섞어 써도 괜찮습니다. 이미지 인덱스가 있는 항목은 이미지를 표시하고 나머지는 글리프로 대체되므로 아이콘을 점진적으로 추가할 수 있습니다.

  • 이미지 목록용 Images와 ImageIndex
  • 이미지 없이 문자나 기호를 쓰는 Glyph
  • VCL은 이미지를 원래 크기로 그립니다
  • Delphi XE8부터 FireMonkey 이미지 목록 지원
도움말 항목 읽기

정보를 알려 주는 항목 Registered 에디션 전용

항목을 TAction에 연결

TActionList 기반 애플리케이션은 이미 명령, 캡션, 활성화 규칙을 한곳에 두고 있습니다. 항목을 Action 속성으로 VCL 또는 FireMonkey TAction에 연결하면 Caption, Enabled, Visible, Hint, ImageIndex가 액션을 따릅니다. 클릭하면 바를 ActionComponent로 하여 액션이 실행되고 OnUpdate는 유휴 시간에 실행되므로, 액션이 비활성화되는 즉시 항목이 회색으로 바뀝니다. .NET에서는 Command와 CommandParameter가 같은 역할을 합니다. TActionList 하나로 폼의 메뉴, 툴바, 키보드 단축키를 모두 구동할 수 있습니다.

  • Action은 항목을 임의의 TBasicAction에 연결합니다
  • 항목의 OnClick이 액션 대신 실행됩니다
  • SGC_NAVIGATION_ACTIONS 아래에서 컴파일됩니다
  • .NET: ICommand를 사용하는 Command와 CommandParameter

Community: 액션 대신 항목의 OnClick 또는 바의 OnItemClick을 지정하세요.

도움말 항목 읽기

키보드, 테마, 출력

바가 네이티브처럼 느껴지고 애플리케이션의 나머지 부분과 일관되게 유지되도록 하는 세부 기능입니다.

키보드 우선 탐색

키보드, 테마, 출력

키보드 우선 탐색

파워 유저는 마우스 없이 페이지를 전환하며 접근성 검토에서도 이를 요구합니다. 바는 Tab으로 포커스를 받고, 포커스된 행은 표시되고 활성화된 항목 사이를 이동합니다. 위쪽과 아래쪽 화살표는 한 칸씩, Home과 End는 처음과 끝으로 이동하고 Enter 또는 Space로 활성화합니다. 아코디언에서는 왼쪽 화살표가 그룹을 접고 오른쪽 화살표가 펼칩니다. 점선 포커스 사각형은 키보드를 사용하는 동안에만 나타나며 포커스는 선택된 페이지와 별개입니다. FireMonkey 바에서도 CanFocus를 통해 같은 키가 동작하므로 데스크톱 사용자는 모든 플랫폼에서 같은 동작을 경험합니다.

  • TabStop은 VCL 바에서 기본으로 켜져 있습니다
  • 모델의 FocusedIndex가 키보드 행입니다
  • SelectedIndex는 선택된 페이지로 유지됩니다
  • 힌트는 접힌 레일에서 캡션을 표시합니다
도움말 항목 읽기
라이트, 다크, 사용자 강조 색상

키보드, 테마, 출력

라이트, 다크, 사용자 강조 색상

애플리케이션의 테마를 무시하는 메뉴는 따로 붙여 놓은 것처럼 보입니다. Theme는 공유 sgcUICore 토큰으로 표면, 테두리, 텍스트, 그룹 헤더, 마우스 오버, 강조 색상을 설정하므로 같은 Theme를 가진 바와 sgcDashboard가 정확히 일치합니다. AccentColor는 선택 막대, 포커스 사각형, 배지의 강조색을 브랜드 색상으로 바꿉니다. 대시보드 타일에 들어 있는 바는 대시보드의 테마를 스스로 따릅니다. 실행 중에 테마를 전환하면 바가 즉시 다시 그려지므로 설정 페이지의 다크 모드 토글에 바로 사용할 수 있습니다.

  • Theme: utDefault(기본값, 애플리케이션 테마를 따름), utLight 또는 utDark
  • $AARRGGBB 값인 AccentColor, 0이면 테마 강조색을 유지합니다
  • 모든 sgcUI 제품과 같은 토큰
  • 대시보드 타일이 자신의 테마를 바에 전달합니다
도움말 항목 읽기
창 없이 바 렌더링

키보드, 테마, 출력

창 없이 바 렌더링

문서, 시각 테스트, 웹 백엔드에서는 메뉴 자체가 아니라 메뉴의 그림이 필요한 경우가 있습니다. sgcNavigation_Render의 렌더러는 창도 VCL이나 FireMonkey도 없이 TsgcNavigationModel을 그리므로, 콘솔 프로그램, 서비스, 서버에서도 동일한 바를 PNG 또는 SVG로 만들 수 있습니다. 이 유닛은 Linux64를 포함한 모든 플랫폼에서 빌드되며 scale 매개변수로 고DPI 화면용 선명한 이미지를 얻을 수 있습니다. 렌더러에 이미지 목록을 전달하면 내보낸 그림에도 실행 중인 애플리케이션과 같은 아이콘이 표시됩니다.

  • sgcNavigationSaveToPNG는 PNG 파일 또는 스트림을 씁니다
  • sgcNavigationSaveToSVG는 같은 바를 SVG로 씁니다
  • sgcNavigationRender는 임의의 sgcUICore 캔버스에 그립니다
  • 논리 픽셀 단위의 너비와 높이에 scale을 곱한 값
도움말 항목 읽기

sgcNavigation 동작 보기

sgcUI 제품군 데모 속의 sgcNavigation: 내장 시뮬레이션 데이터로 오프라인에서 실행되는 완전한 애플리케이션입니다.

sgcNavigation로 개발하는 사람들

ERP와 관리자 앱을 위한 현대적인 셸

이미 수십 개의 폼이 있고 메인 창은 여전히 메뉴 바에서 폼을 여는 구조입니다. 왼쪽에 영역마다 항목 하나씩 사이드바를 두고, OnSelectionChange로 탭이 숨겨진 TPageControl의 탭을 전환하세요. 배지는 처리 대기 중인 주문이나 읽지 않은 메시지를 보여 주고, 아이콘 레일은 폼에 공간을 돌려줍니다. SidebarApp을 실행하면 sgcDashboard 페이지와 함께 이 패턴이 동작하는 모습을 볼 수 있습니다.

  • 사이드바 모드
  • 배지
  • 아이콘 레일로 접기
SidebarApp 데모 실행

설정 및 관리 콘솔

설정 화면은 Sales, Inventory, Admin 같은 몇 개의 제목 아래 수십 개의 페이지를 묶습니다. 아코디언은 한 번에 한 섹션만, 또는 AllowMultiExpand로 여러 섹션을 열어 두며, 액션 링크는 TActionList의 명령과 활성화 규칙을 그대로 재사용합니다. 키보드 사용자는 화살표 키로 섹션 사이를 이동합니다. Accordion 데모는 그룹 세 개, 펼침 토글, 클릭 로그를 보여 줍니다.

  • 아코디언 모드
  • 액션 링크
  • 키보드 탐색
Accordion 데모 실행

모든 플랫폼에서 같은 내비게이션

Windows, macOS, iOS, Android에서 실행되는 FireMonkey 애플리케이션이 플랫폼마다 다른 메뉴를 필요로 해서는 안 됩니다. TsgcFMXNavigationBar는 VCL 바와 같은 항목, 모드, 이벤트를 가지며 WinForms, WPF, Avalonia용 .NET 바도 같은 이름을 따릅니다. Delphi 데스크톱 앱과 .NET 도구를 함께 배포하는 팀은 하나의 사고 모델을 유지할 수 있습니다. SidebarFMX는 사이드바 데모의 FireMonkey 버전입니다.

  • FireMonkey 바
  • 테마
  • .NET 바
SidebarFMX 데모 실행

A Navigation Bar in a Few Lines

The same API in Delphi, C++ Builder and C#: an accordion bar with groups, a badge, a disabled item and a Collapse button.

procedure TMainForm.CreateNavigation;
var
  oItem: TsgcNavigationItem;
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);
  oItem := FNav.Items.AddItem('Users', 'U');
  oItem.Hint := 'Manage the users';
  oItem := FNav.Items.AddItem('Billing', 'B');
  oItem.Enabled := False;
  FNav.SelectedIndex := 1;
  FNav.OnItemClick := NavItemClick;
  FNav.OnSelectionChange := NavSelectionChange;
  // a Collapse button folds the bar into an icon rail with an animation
  FNav.AnimateCollapse := True;
  FButton.Caption := 'Collapse';
  FButton.OnClick := ButtonClick;
end;

procedure TMainForm.NavItemClick(Sender: TObject; aItem: TsgcNavigationItem);
begin
  Caption := 'Clicked: ' + aItem.Caption;
end;

procedure TMainForm.NavSelectionChange(Sender: TObject);
begin
  FPanel.Caption := FNav.Items[FNav.SelectedIndex].Caption + ' page';
end;

procedure TMainForm.ButtonClick(Sender: TObject);
begin
  FNav.Collapsed := not FNav.Collapsed;
end;
#include <vcl.h>
#include <Vcl.ExtCtrls.hpp>
#include "sgcUICore_Theme.hpp"
#include "sgcNavigation_Model.hpp"
#include "sgcNavigation_VCL.hpp"

class TNavHandler : public TObject
{
public:
  TsgcVCLNavigationBar *Nav;
  TPanel *Content;
  void __fastcall ItemClick(TObject *Sender, TsgcNavigationItem *aItem);
  void __fastcall SelectionChange(TObject *Sender);
  void __fastcall CollapseClick(TObject *Sender);
};

void __fastcall TNavHandler::ItemClick(TObject *Sender, TsgcNavigationItem *aItem)
{
  Content->Caption = "Clicked: " + aItem->Caption;
}

void __fastcall TNavHandler::SelectionChange(TObject *Sender)
{
  Content->Caption = Nav->Items->Items[Nav->SelectedIndex]->Caption + " page";
}

void __fastcall TNavHandler::CollapseClick(TObject *Sender)
{
  Nav->Collapsed = !Nav->Collapsed;   // animated fold into an icon rail
}

void __fastcall CreateNavigation(TForm *Form, TNavHandler *Handler)
{
  // an accordion bar on the left, dark theme, several groups open at once
  TsgcVCLNavigationBar *Nav = new TsgcVCLNavigationBar(Form);
  Nav->Parent = Form;
  Nav->Align = alLeft;
  Nav->Mode = nbmAccordion;
  Nav->AllowMultiExpand = true;
  Nav->AnimateCollapse = true;
  Nav->Theme = utDark;
  // a group header (third parameter true), then the items under it
  Nav->Items->AddItem("Sales", "", true);
  Nav->Items->AddItem("Orders", "O", false);
  Nav->Items->AddItem("Invoices", "I", false)->Badge = "3";
  Nav->Items->AddItem("Admin", "", true);
  Nav->Items->AddItem("Users", "U", false)->Hint = "Manage the users";
  Nav->Items->AddItem("Billing", "B", false)->Enabled = false;
  Nav->SelectedIndex = 1;
  TPanel *Content = new TPanel(Form);
  Content->Parent = Form;
  Content->Align = alClient;
  Handler->Nav = Nav;
  Handler->Content = Content;
  Nav->OnItemClick = Handler->ItemClick;
  Nav->OnSelectionChange = Handler->SelectionChange;
  TButton *Button = new TButton(Form);
  Button->Parent = Content;
  Button->Caption = "Collapse";
  Button->OnClick = Handler->CollapseClick;
}
using System;
using System.Windows.Forms;
using esegece.sgcUICore;
using esegece.sgcNavigation;

internal class MainForm : Form
{
    private readonly TsgcWinFormsNavigationBar Nav = new TsgcWinFormsNavigationBar();
    private readonly Label lblPage = new Label { Dock = DockStyle.Fill };
    private readonly Button btnCollapse = new Button { Text = "Collapse", Dock = DockStyle.Top };

    public MainForm()
    {
        // an accordion bar on the left, dark theme, several groups open at once
        Nav.Dock = DockStyle.Left;
        Nav.Mode = TsgcNavigationMode.nbmAccordion;
        Nav.AllowMultiExpand = true;
        Nav.AnimateCollapse = true;
        Nav.Theme = TsgcUITheme.utDark;
        // a group header (third parameter true), then the items under it
        Nav.Items.AddItem("Sales", "", true);
        Nav.Items.AddItem("Orders", "O");
        Nav.Items.AddItem("Invoices", "I").Badge = "3";
        Nav.Items.AddItem("Admin", "", true);
        Nav.Items.AddItem("Users", "U").Hint = "Manage the users";
        Nav.Items.AddItem("Billing", "B").Enabled = false;
        Nav.SelectedIndex = 1;
        Nav.OnItemClick = (sender, item) => Text = "Clicked: " + item.Caption;
        Nav.OnSelectionChange = sender => lblPage.Text = Nav.Items[Nav.SelectedIndex].Caption + " page";
        // the Collapse button folds the bar into an icon rail with an animation
        btnCollapse.Click += (s, e) => Nav.Collapsed = !Nav.Collapsed;
        Controls.Add(lblPage);
        Controls.Add(btnCollapse);
        Controls.Add(Nav);
    }
}
dotnet add package esegece.sgcNavigation.WinForms

sgcNavigation 데모 실행하기

SidebarApp과 Accordion 데모는 VCL과 C++ Builder용으로, Delphi용 FireMonkey 버전과 함께 제공되며, .NET 에디션에서는 WinForms, WPF, Avalonia 프로젝트로 제공됩니다.

SidebarApp

SidebarApp

아이콘, 배지, 비활성 항목, Collapse 버튼, 테마 콤보, sgcDashboard KPI 페이지를 갖추고 탭이 숨겨진 페이지 컨트롤을 구동하는 사이드바입니다. 애플리케이션 셸 패턴을 처음부터 끝까지 보여 줍니다.

Accordion

Registered 에디션 전용 Accordion

Sales, Inventory, Admin 그룹 세 개, AllowMultiExpand 토글, 액션 링크, 클릭 로그가 있습니다. 액션 링크를 사용하므로 Registered 또는 체험판 에디션이 필요합니다.

SidebarFMX

FireMonkey용 TsgcFMXNavigationBar로 만든 사이드바 데모이며 Delphi 전용입니다. VCL 버전과 같은 항목, 모드, 이벤트를 가지며 Windows, macOS, 모바일 대상에서 사용할 수 있습니다.

컴파일된 데모

sgcUI 제품 전체의 실행 파일을 제공하며, 설치가 필요 없습니다.

sgcUI_bin.zip 다운로드 →

sgcNavigation가 포함된 곳

sgcNavigation은 Standard부터 시작하는 모든 sgcUI 에디션에 포함되어 있으며 단독으로도 판매됩니다. 또한 All-Access 번들에도 포함되어 있습니다.

sgcNavigation 단일 패키지

€149 / 개발자, 전체 소스 코드, 1년 업데이트.

sgcNavigation 구매 → 가격 보기 →

sgcUI Standard

sgcNavigation, sgcGrid, sgcToolbar 및 sgcEditors, €380부터.

Standard 보기 →

sgcUI Professional

Standard에 sgcCharts, sgcDashboard 및 sgcGauges 추가, €529부터.

Professional 보기 →

sgcUI Enterprise

sgcUI 제품 14개 전체, €699부터.

Enterprise 보기 →

무료 Community 에디션(NuGet의 esegece.sgcNavigation.Community)은 항목의 액션 링크를 제외한 모든 기능을 제공합니다.

기능Community (무료)Registered 에디션
사이드바 및 아코디언 모드✓✓
애니메이션 아이콘 레일로 접기✓✓
아이콘, 글리프, 배지✓✓
키보드 탐색✓✓
라이트 및 다크 테마, 강조 색상✓✓
헤드리스 PNG 및 SVG 출력✓✓
액션 링크(Delphi)와 Command(.NET)−✓

지원 프레임워크 및 플랫폼

sgcNavigation의 컴포넌트

컴포넌트대상
TsgcVCLNavigationBarDelphi 및 C++ Builder, VCL (sgcNavigation_VCL)
TsgcFMXNavigationBarDelphi 및 C++ Builder, FireMonkey (sgcNavigation_FMX)
TsgcNavigationItem, TsgcNavigationItems, TsgcNavigationModel프레임워크 중립 모델 (sgcNavigation_Model)
TsgcWinFormsNavigationBar.NET, WinForms
TsgcWpfNavigationBar.NET, WPF
TsgcAvaloniaNavigationBar.NET, Avalonia
대상컴포넌트플랫폼
Delphi 7부터 13, VCLTsgcVCLNavigationBarWin32 및 Win64
Delphi XE6부터 13, FireMonkeyTsgcFMXNavigationBarWindows, macOS, iOS, Android, Linux(FMXLinux)
C++ Builder 2007부터 13TsgcVCLNavigationBar, TsgcFMXNavigationBar생성된 .hpp 헤더와 정적 라이브러리
Delphi 10.2부터 13, 프레임워크 중립모델과 헤드리스 PNG 및 SVG 렌더러Linux64, 예를 들어 서버에서 바를 렌더링할 때
.NET Framework 4.7.2, .NET 8, 9 및 10TsgcWinFormsNavigationBar, WPF 및 Avalonia 바WinForms, WPF, Avalonia

자주 묻는 질문

둘 다입니다. Mode 속성이 같은 컨트롤에서 nbmSidebar와 nbmAccordion을 전환하며 항목과 이벤트는 동일하므로, 프로젝트 후반에 마음을 바꾸거나 사용자 설정으로 두 스타일을 모두 제공할 수 있습니다. 각 모드도 접힌 아이콘 레일로 접힙니다.

네. OnSelectionChange를 처리하고 SelectedIndex에 해당하는 페이지를 표시하면 되며, 예를 들어 탭이 숨겨진 TPageControl의 탭이나 필요할 때 생성하는 프레임이 있습니다. SidebarApp 데모가 정확히 이렇게 만들어져 있으며 sgcDashboard KPI 페이지를 호스팅합니다.

네. TsgcFMXNavigationBar는 Delphi XE6부터 Windows, macOS, iOS, Android, Linux(FMXLinux)를 지원하며 VCL 바와 같은 항목, 모드, 이벤트를 가집니다. FireMonkey 이미지 목록은 Delphi XE8 이상이 필요하며, 이전 버전에서는 각 항목의 Glyph를 사용합니다.

항목의 액션 링크뿐이며, .NET에서는 Command와 CommandParameter 속성에 해당합니다. 대신 항목의 OnClick 또는 바의 OnItemClick을 사용하세요. 아이콘 레일, 배지, 테마, 헤드리스 출력을 포함한 다른 모든 기능은 Community에 들어 있습니다. 에디션을 참조하세요.

아니요. .NET 포트에는 디자이너 동작이나 컬렉션 편집기가 없어 항목이 직렬화되지 않으므로, 보통 폼이나 창의 생성자에서 코드로 추가합니다. Delphi와 C++ Builder에서는 Items 컬렉션을 표준 컬렉션 편집기로 디자인 타임에 편집합니다.

네. 모든 크기는 논리 픽셀에 모니터의 배율을 곱한 값이므로 행, 아이콘, 배지가 어떤 DPI에서도 선명합니다. WinForms에서는 VCL과 마찬가지로 너비와 높이가 DPI / 96으로 조정되며, WPF와 Avalonia에서는 장치 독립 단위를 사용합니다.

네. sgcNavigationSaveToPNG와 sgcNavigationSaveToSVG는 창도 VCL이나 FireMonkey도 없이 모델에서 바를 렌더링하며, Delphi 10.2부터는 Linux64에서도 가능합니다. 문서, 시각적 회귀 테스트, 애플리케이션의 메뉴를 보여 주는 웹 페이지에 사용하세요.

sgcNavigation 도움말

3,000+개발자
20+년
761+컴포넌트
30+API 통합
5플랫폼
30일 환불 보장만족하지 않으세요? 구매 후 30일 이내에 전액 환불을 요청하세요. 환불 정책 보기

오늘 sgcNavigation 체험하기

sgcUI 체험판에는 sgcNavigation과 다른 모든 sgcUI 제품이 포함되어 있습니다.