한눈에 보기

Bootstrap <ol class="breadcrumb">를 내보내는 내비게이션 컴포넌트입니다. 마지막 항목(또는 Active로 표시된 항목)은 현재 페이지로 렌더링됩니다. 항목을 추가한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_Breadcrumb

렌더링

Bootstrap 브레드크럼 마크업

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 항목을 추가하고, 렌더링하기

경로 세그먼트마다 항목 하나씩을 Items에 추가하고, 선택적으로 사용자 지정 Divider를 설정한 다음, HTML을 읽습니다.

uses
  sgcHTML_Component_Breadcrumb;

var
  oBreadcrumb: TsgcHTMLComponent_Breadcrumb;
begin
  oBreadcrumb := TsgcHTMLComponent_Breadcrumb.Create(nil);
  try
    oBreadcrumb.Divider := '>';

    with oBreadcrumb.Items.Add do begin Text := 'Home'; Href := '/'; end;
    with oBreadcrumb.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oBreadcrumb.Items.Add do begin Text := 'sgcHTML'; Active := True; end;

    WebModule.Response := oBreadcrumb.HTML;   // <ol class="breadcrumb">
  finally
    oBreadcrumb.Free;
  end;
end;

// includes: sgcHTML_Component_Breadcrumb.hpp

TsgcHTMLComponent_Breadcrumb *oBreadcrumb = new TsgcHTMLComponent_Breadcrumb(NULL);
try
{
  oBreadcrumb->Divider = ">";

  TsgcHTMLBreadcrumbItem *oItem = oBreadcrumb->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/";
  oItem = oBreadcrumb->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oBreadcrumb->Items->Add(); oItem->Text = "sgcHTML"; oItem->Active = true;

  String html = oBreadcrumb->HTML;   // <ol class="breadcrumb">
}
__finally
{
  delete oBreadcrumb;
}

using esegece.sgcWebSockets;

var breadcrumb = new TsgcHTMLComponent_Breadcrumb();
breadcrumb.Divider = ">";

var item = breadcrumb.Items.Add();
item.Text = "Home"; item.Href = "/";
item = breadcrumb.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = breadcrumb.Items.Add(); item.Text = "sgcHTML"; item.Active = true;

string html = breadcrumb.HTML;   // <ol class="breadcrumb">

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

Items

Items.Add는 TsgcHTMLBreadcrumbItem을 반환합니다. 각 경로 세그먼트에 대해 순서대로 그 Text와 Href를 설정하십시오.

현재 페이지

마지막 항목 또는 Active로 표시된 항목은 링크 대신 aria-current="page"가 있는 일반 텍스트로 렌더링됩니다.

구분 기호

Divider는 Bootstrap --bs-breadcrumb-divider 변수를 통해 항목 사이의 구분 기호(예: '>' 또는 '/')를 재정의합니다.

식별

BreadcrumbID는 스타일링 또는 스크립팅 후크를 위해 감싸는 <nav>의 id를 설정합니다.

출력

HTML은 정렬된 목록이 있는 전체 <nav aria-label="breadcrumb">를 반환합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기

Breadcrumb

TsgcHTMLComponent_Breadcrumb