sgcUI sgcNavigation을 지금 바로 사용할 수 있어요

sgcNavigation. 모든 페이지를 한눈에. 레일로 접어요.

몇 분 만에 애플리케이션에 현대적인 내비게이션 메뉴를 만들어 보세요. 컨트롤 하나가 사이드바도 아코디언도 되고, 부드러운 애니메이션으로 아이콘 레일로 접히며, 읽지 않은 개수를 배지로 보여 주고, 키보드만으로 완전히 쓸 수 있어요. 라이트 테마와 다크 테마가 기본으로 들어 있어요.

체험판 다운로드 sgcNavigation 살펴보기

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7~13

2컨트롤 하나에 담긴 내비게이션 스타일, 사이드바와 아코디언
~150 ms바를 아이콘 레일로 접는 애니메이션 시간
220 / 56논리 픽셀, 기본 펼친 너비와 접은 너비
5UI 프레임워크: VCL, FireMonkey, WinForms, WPF, Avalonia

앱 메뉴에 필요한 모든 것.

페이지 목록을 사용자가 곧바로 길을 찾는 내비게이션 셸로 바꿔 주는 기능 10가지, 모든 프레임워크에서요.

스타일 둘, 컨트롤 하나
같은 항목과 이벤트로 사이드바 또는 아코디언을, 속성 하나로 전환해요.
모든 UI 프레임워크
VCL, FireMonkey, WinForms, WPF, Avalonia에서 같은 모델과 이름을 써요.
스위트와 어울려요
라이트 테마와 다크 테마, 모든 sgcUI 제품과 공유하는 강조 색.
헤드리스 출력
Linux64를 포함해, 창 없이 같은 바를 PNG나 SVG로 렌더링해요.

동작하는 모습을 보세요.

체험판에 들어 있는 sgcNavigation 데모에서 캡처했어요.

Workspace와 Business 그룹의 항목 8개로 이루어진 사이드바, Dashboard가 선택되고 오른쪽에 KPI 카드 2개가 있는 SidebarApp 데모

레이아웃과 모드

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

TsgcVCLNavigationBar를 폼에 놓고 왼쪽으로 정렬한 뒤 항목을 추가하세요. IsGroup는 항목을 그룹 머리글로 바꿔 줘요.
선택한 행은 강조 색을 옅게 깐 배경과 3픽셀 강조 막대로 표시되어, 사용자가 지금 어디에 있는지 늘 알 수 있어요.
OnSelectionChange는 해당 페이지를 보여 줘요. SidebarApp 데모처럼 탭을 숨긴 TPageControl을 쓰면 돼요.

AllowMultiExpand를 켠 Mode = nbmAccordion: Sales와 Inventory는 열려 있고 Admin은 닫혀 있어요

아코디언

속성 하나로 아코디언으로 바꿔요.

Mode := nbmAccordion은 모든 그룹 머리글을, 아래 항목을 열고 닫는 섹션으로 바꿔요.
기본값으로는 한 번에 그룹 하나만 열리고, 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를 포함한 모든 플랫폼에서 빌드되므로, 콘솔 프로그램, 서비스, 서버에서도 같은 바를 그려요.
배율 매개변수로 고해상도 DPI 화면에도 선명한 이미지를 얻고, 이미지 목록이 같은 아이콘을 공급해요.

sgcNavigation 더 보기.

테마, 아이콘, 키보드 포커스, SidebarApp 셸을 데모에서 그대로 가져왔어요.

같은 항목, 배지, 선택 상태를 가진 같은 바를 utLight와 utDark 테마로 본 모습 — 속성 하나로 바를 `utLight`와 `utDark` 사이에서 전환하고, `AccentColor`로 브랜드 색을 입혀요.

왼쪽: ImageIndex로 TImageList에서 가져온 아이콘. 오른쪽: 이미지 목록 없이 항목마다 Glyph 글자 — `ImageIndex`는 `TImageList`에서 아이콘을 고르고, `Glyph`는 이미지 목록 없이 글자 하나를 그려요.

키보드 중심 탐색: Dashboard가 선택된 채 점선 포커스 사각형이 Tasks에 있어요 — Up, Down, Home, End, Enter, Space로 바를 이동하고, Left와 Right로 아코디언 그룹을 접고 펴요.

라이트 테마의 SidebarApp: Inbox와 Reports 배지, 비활성화된 Billing 항목, sgcDashboard KPI 페이지 — SidebarApp: 배지, 비활성화된 항목, 선택에 따라 바뀌는 sgcDashboard KPI 페이지.

몇 줄로 만드는 내비게이션 바.

그룹, 배지, 비활성화된 항목, 접기 버튼이 있는 아코디언 바예요. 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;