Tour
TsgcHTMLComponent_Tour: 온보딩을 위한 안내형 제품 둘러보기입니다. 스포트라이트와 카드로 페이지의 요소를 한 단계씩 강조하며, 첫 방문 시 스스로, 버튼에서 또는 서버에서 시작되고, 각 사용자의 진행 상황을 서버 이벤트로 보고합니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.
TsgcHTMLComponent_Tour: 온보딩을 위한 안내형 제품 둘러보기입니다. 스포트라이트와 카드로 페이지의 요소를 한 단계씩 강조하며, 첫 방문 시 스스로, 버튼에서 또는 서버에서 시작되고, 각 사용자의 진행 상황을 서버 이벤트로 보고합니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.
Steps를 추가하고 각 단계가 가리킬 요소를 지정한 다음, AutoStart를 설정하거나 시작 버튼을 추가합니다. OnStepChange, OnSkip, OnComplete가 각 사용자가 어디까지 진행했는지 서버에 알려 줍니다.
TsgcHTMLComponent_Tour, Steps에 단계마다 TsgcHTMLTourStep 하나씩 포함
구성을 JSON으로 담은 숨겨진 요소와 둘러보기 스크립트이며, 스타일이 내장되어 있어 외부 파일이나 CDN이 필요 없습니다
Delphi, C++ Builder, .NET
AutoStart를 사용하면 브라우저가 페이지를 처음 열 때 둘러보기가 스스로 시작되고, 시작 버튼으로 언제든 다시 재생할 수 있습니다. HTMXEngine이 지정되어 있으면 브라우저는 핸들러가 있는 이벤트를 전송합니다.
uses
sgcHTML_Session, sgcHTML_Component_Tour;
// 한 번만 생성: 페이지가 렌더링된 뒤에도 서버 이벤트에 응답합니다
oTour := TsgcHTMLComponent_Tour.Create(Self);
oTour.Name := 'onboarding';
oTour.AutoStart := True;
oTour.HTMXEngine := HTMXEngine1;
oTour.OnComplete := TourComplete;
oTour.OnSkip := TourSkip;
with oTour.Steps.Add do
begin
Title := 'Welcome'; // 대상 없음: 가운데에 표시되는 카드
Content := '<p>Take a minute to see what is where.</p>';
end;
with oTour.Steps.Add do
begin
Target := '#sidebar';
Title := 'Navigation';
Content := '<p>Every module of the app is here.</p>';
Placement := trpRight;
end;
sHtml := oTour.HTML + oTour.GetStartButtonHTML('Restart tour');
procedure TForm1.TourComplete(Sender: TObject; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession; // 이 요청의 세션
if oSession <> nil then
SaveOnboardingDone(oSession.UserID); // 사용자 고유의 코드
end;
procedure TForm1.TourSkip(Sender: TObject; aStep: Integer; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession;
if oSession <> nil then
SaveOnboardingSkipped(oSession.UserID, aStep);
end;@* 각 단계의 콘텐츠는 해당 카드의 HTML입니다 *@
<sgc-tour name="onboarding" auto-start="true" on-complete="Model.TourDone" on-skip="Model.TourSkipped">
<sgc-tour-step title="Welcome"><p>Take a minute to see what is where.</p></sgc-tour-step>
<sgc-tour-step target="#sidebar" title="Navigation" placement="right">
<p>Every module of the app is here.</p>
</sgc-tour-step>
<sgc-tour-step target="#btnSettings" title="Settings" image="/img/settings.png">
<p>Change the theme and your profile here.</p>
</sgc-tour-step>
</sgc-tour>using esegece.sgcWebSockets;
var tour = new TsgcHTMLComponent_Tour { Name = "onboarding" };
tour.AutoStart = true;
tour.HTMXEngine = htmxEngine;
tour.OnComplete += TourDone;
tour.OnSkip += TourSkipped;
var step = tour.Steps.Add();
step.Title = "Welcome";
step.Content = "<p>Take a minute to see what is where.</p>";
step = tour.Steps.Add();
step.Target = "#sidebar";
step.Title = "Navigation";
step.Content = "<p>Every module of the app is here.</p>";
step.Placement = TsgcHTMLTourPlacement.trpRight;
string html = tour.HTML + tour.GetStartButtonHTML("Restart tour");
public void TourDone(object sender, ref string response)
{
SaveOnboardingDone(User.Identity?.Name);
}
public void TourSkipped(object sender, int step, ref string response)
{
SaveOnboardingSkipped(User.Identity?.Name, step);
}새 사용자에게 무엇이 어디에 있는지 보여 주는 첫 실행 안내와, 각자가 어디까지 진행했는지에 대한 서버 측 기록입니다.
각 단계는 어둡게 처리된 배경에서 스포트라이트로 오려 낸 영역으로 요소를 강조하고, 그 옆에 제목, HTML 콘텐츠, 선택적 이미지, 진행 표시 점이 있는 단계 카운터, 이전, 다음, 둘러보기 건너뛰기, 완료 버튼이 있는 카드를 보여 줍니다. 대상이 없는 단계는 카드를 페이지 가운데에 표시합니다.
첫 방문 시 스스로(AutoStart), 버튼에서(GetStartButtonHTML 또는 임의의 요소에 data-sgc-tour-start), 사용자 고유의 스크립트에서(GetStartScript), 또는 한 사용자를 위해 서버에서(GetStartHTML) 시작할 수 있습니다.
완료 또는 둘러보기 건너뛰기는 브라우저의 localStorage에 StorageKey(기본값 sgc-tour:<Name>)로 저장되며, AutoStart는 그 브라우저에서 둘러보기를 다시 시작하지 않습니다. 개정한 둘러보기를 모든 사용자에게 보여 주려면 StorageKey를 바꾸십시오.
대상이 없거나 숨겨진 단계, 예를 들어 사용자에게 없는 역할의 패널은 양방향 모두에서 건너뛰며, 카운터는 표시할 수 있는 단계만 셉니다. 카드는 뷰포트 안에 머물고, 좁은 화면에서는 아래쪽, 위쪽 또는 가운데로 대체됩니다.
카드는 제목으로 이름 붙여진 대화 상자입니다. 단계가 표시되면 포커스가 다음 버튼으로 이동하고 둘러보기가 끝나면 원래 위치로 돌아가며, 모달 카드에서는 Tab 키가 카드의 버튼 안에서 순환합니다. 화살표 키로 단계 사이를 이동하고 Esc 키로 종료하며, polite 라이브 리전이 "n / m 단계: 제목"을 알립니다.
버튼과 단계 텍스트는 라이브러리의 17개 언어로 제공됩니다. 오른쪽에서 왼쪽으로 쓰는 페이지에서는 배치와 화살표 키가 반전되며, 카드는 페이지의 data-bs-theme를 따라 하므로 다크 테마도 따릅니다. 스타일은 둘러보기가 시작될 때 추가되고 끝날 때 제거됩니다.
가장 자주 사용하는 멤버입니다.
각 단계에는 Target(CSS 선택자, 첫 번째 일치 항목) 또는 TargetComponent, 일반 텍스트인 Title, sgcHTMLSanitizeHTML로 정리된 HTML인 Content, sgcHTMLSanitizeURL을 거치는 Image URL, Placement, 고유한 ShowBackdrop과 ScrollIntoView가 있습니다.
ShowBackdrop, ShowProgress, ShowSkip은 배경, 점이 있는 카운터, 둘러보기 건너뛰기 버튼을 켜거나 끕니다. Padding(기본값 6)은 대상 주위의 여백(픽셀)이고, AllowKeyboard는 Esc와 화살표 키를 사용하게 하며, CloseOnBackdropClick은 배경을 클릭하면 둘러보기를 종료합니다.
OnStepChange는 단계가 표시될 때마다, OnSkip은 사용자가 끝나기 전에 떠날 때 단계의 인덱스와 함께, OnComplete는 사용자가 마지막 단계에서 완료를 누를 때 발생합니다. 브라우저는 핸들러가 있는 이벤트만 전송하며, Steps 범위를 벗어난 단계 인덱스는 거부됩니다.
핸들러는 요청의 스레드에서 실행되며, 여기서 sgcHTMLRequestSession이 세션과 사용자를 제공합니다. aResponse에 반환하는 HTML은 요소에 hx-swap-oob="true"가 표시되어 있으면 htmx가 교체합니다.
HTMXEngine을 지정하거나 ActionURL을 설정하고 사용자 고유의 라우트에서 DispatchComponentEvent('tour', Params, Response)를 호출하십시오. 둘 다 없으면 둘러보기는 브라우저에서만 실행되고 아무것도 전송하지 않습니다. 페이지에 htmx가 있으면 htmx.ajax로, 없으면 페이지의 CSRF 메타 태그와 함께 XMLHttpRequest로 전송합니다.
GetStartHTML은 htmx 응답이나 하나의 연결로의 푸시로 받은 브라우저에서 둘러보기를 시작하는 조각을 반환합니다. 시작 버튼, GetStartScript, GetStartHTML은 브라우저에 저장된 항목을 무시합니다.
window.sgcHTMLTour는 start(id[, step]), next, back, end, reset, active를 제공합니다. 모든 함수는 둘러보기의 id, 즉 GetElementIdentifier의 값을 받습니다. reset은 저장된 항목을 제거하므로 AutoStart가 둘러보기를 다시 실행합니다.
Razor 뷰에서는 <sgc-tour name="..."> Tag Helper가 둘러보기를 렌더링하며, 단계마다 <sgc-tour-step> 자식 하나가 있고 그 내용이 카드의 HTML입니다. 첫 렌더링에서 엔진과 이름마다 컴포넌트 하나를 만들어 AddSgcHtml의 엔진에 등록하므로, 페이지가 렌더링된 뒤에도 서버 이벤트에 응답합니다.
Demos\60.HTML\01.RunTime\29.Tour는 포트 8131에서 동작하는 sgc Cloud Console입니다. 스포트라이트가 있는 8단계의 첫 실행 둘러보기, 같은 페이지의 두 번째 새로운 기능 둘러보기, 도구 모음 버튼, 통계 카드, 폼 필드의 툴팁, 서버가 사용자별로 기록하는 온보딩 퍼널이 있습니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.
| 온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 투어 및 툴팁 데모로 확인해 보세요. | 열기 | |
| 온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다. | 열기 | |
| Tooltip 컴포넌트버튼과 필드의 힌트로, 같은 데모에서 둘러보기와 함께 표시됩니다. | 열기 | |
| 모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오. | 열기 | |
| 무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다. | 열기 | |
| 가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스. | 열기 |