TsgcHTMLComponent_Tour: ilk kullanım için yönlendirmeli bir ürün turu. Sayfanın öğelerini bir spot ışığı ve bir kartla adım adım vurgular, ilk ziyarette kendiliğinden, bir düğmeden veya sunucudan başlar ve her kullanıcının ilerlemesini sunucu olaylarıyla bildirir, Delphi, C++ Builder ve .NET ile.
Adımlar ekleyin, her birini bir öğeye yöneltin ve AutoStart ayarlayın ya da bir başlat düğmesi ekleyin. OnStepChange, OnSkip ve OnComplete sunucuya her kullanıcının ne kadar ilerlediğini bildirir.
TsgcHTMLComponent_Tour, Adımlar içinde adım başına bir TsgcHTMLTourStep ile
Yapılandırmayı JSON olarak içeren gizli bir öğe ve tur betiği; stilleri gömülü, harici dosya yok ve CDN yok
Delphi, C++ Builder, .NET
AutoStart ile tur, bir tarayıcı sayfayı ilk kez açtığında kendiliğinden başlar ve başlat düğmesi onu istenen zamanda yeniden oynatır. Bir HTMXEngine atandığında tarayıcı, işleyicisi olan olayları gönderir.
uses
sgcHTML_Session, sgcHTML_Component_Tour;
// Bir kez oluşturulur: sayfa oluşturulduktan sonra sunucu olaylarını yanıtlar
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'; // hedef yok: ortada bir kart
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; // bu isteğin oturumu
if oSession <> nil then
SaveOnboardingDone(oSession.UserID); // kendi kodunuz
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;@* Her adımın içeriği kartının HTML'idir *@
<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);
}Yeni kullanıcılara neyin nerede olduğunu gösteren bir ilk çalıştırma ve her birinin ne kadar ilerlediğine dair sunucunuzda bir kayıt.
Her adım, kararmış bir arka planda bir spot ışığı kesikliğiyle bir öğeyi vurgular ve yanında bir başlık, HTML içerik, isteğe bağlı bir görüntü, ilerleme noktalı bir adım sayacı ve Geri, İleri, Turu atla ve Bitti düğmeleri olan bir kart gösterir. Hedefi olmayan bir adım kartı sayfanın ortasında gösterir.
İlk ziyarette kendiliğinden (AutoStart), bir düğmeden (GetStartButtonHTML veya herhangi bir öğede data-sgc-tour-start), kendi betiğinizden (GetStartScript) ya da bir kullanıcı için sunucudan (GetStartHTML).
Bitti veya Turu atla, tarayıcının localStorage alanında StorageKey altında, varsayılan olarak sgc-tour:<Name>, saklanır ve AutoStart turu orada yeniden başlatmaz. Gözden geçirilmiş bir turu herkese göstermek için StorageKey değerini değiştirin.
Hedefi eksik veya gizli olan bir adım, örneğin kullanıcının sahip olmadığı bir rolün paneli, her iki yönde de atlanır ve sayaç yalnızca gösterilebilecek adımları sayar. Kart görünüm alanının içinde kalır ve dar ekranlarda alta, üste veya ortaya geçer.
Kart, başlığıyla adlandırılmış bir iletişim kutusudur. Bir adım gösterildiğinde odak İleri üzerine geçer ve tur bittiğinde eski yerine döner; kipli bir kartta Tab düğmeleri arasında döner. Ok tuşları adımlar arasında gezinir, Esc çıkar ve kibar bir canlı bölge "Adım n / m: başlık" duyurusunu yapar.
Düğmeler ve adım metni kitaplığın 17 dilinde gelir. Sağdan sola sayfalar yerleşimi ve ok tuşlarını yansıtır ve kart sayfanın data-bs-theme değerini kopyalar, böylece koyu temayı izler. Stiller tur başladığında eklenir ve bittiğinde kaldırılır.
En sık başvuracağınız üyeler.
Her adımın bir Target (bir CSS seçicisi, ilk eşleşmesi) veya TargetComponent, düz metin bir Title, sgcHTMLSanitizeHTML ile temizlenmiş HTML bir Content, sgcHTMLSanitizeURL içinden geçen bir Image URL'si, bir Placement ve kendi ShowBackdrop ile ScrollIntoView değerleri vardır.
ShowBackdrop, ShowProgress ve ShowSkip arka planı, noktalı sayacı ve Turu atla düğmesini açar veya kapatır. Padding (varsayılan 6) hedefin çevresindeki piksel boşluğudur, AllowKeyboard Esc ve ok tuşlarını etkinleştirir ve CloseOnBackdropClick arka plana tıklamada turdan çıkar.
OnStepChange bir adım her gösterildiğinde, OnSkip kullanıcı sondan önce ayrıldığında adımın dizini ile, OnComplete ise kullanıcı son adımda Bitti düğmesine bastığında tetiklenir. Tarayıcı yalnızca işleyicisi olan olayları gönderir ve Adımlar dışındaki bir adım dizini reddedilir.
İşleyici isteğin iş parçacığında çalışır; orada sgcHTMLRequestSession oturumu ve kullanıcıyı verir. aResponse içinde döndürdüğü HTML, öğeleri hx-swap-oob="true" ile işaretliyse htmx tarafından değiştirilir.
HTMXEngine atayın ya da ActionURL ayarlayın ve kendi rotanızdan DispatchComponentEvent('tour', Params, Response) çağırın. İkisi de yoksa tur tarayıcıda çalışır ve hiçbir şey göndermez. Sayfada htmx varsa htmx.ajax üzerinden, yoksa sayfanın CSRF meta etiketleriyle XMLHttpRequest üzerinden gönderir.
GetStartHTML, onu alan tarayıcıda turu başlatan bir parçayı, bir htmx yanıtı veya tek bir bağlantıya itme olarak döndürür. Başlat düğmesi, GetStartScript ve GetStartHTML tarayıcıda saklanan girdiyi yok sayar.
window.sgcHTMLTour şunları sunar: start(id[, step]), next, back, end, reset ve active. Her işlev turun kimliğini, yani GetElementIdentifier değerini alır. reset saklanan girdiyi kaldırır, böylece AutoStart turu yeniden çalıştırır.
Bir Razor görünümünde <sgc-tour name="..."> Tag Helper'ı turu, içeriği kartın HTML'i olan adım başına bir <sgc-tour-step> alt öğesiyle oluşturur. İlk oluşturma, AddSgcHtml motoruna kayıtlı, motor ve ad başına bir bileşen oluşturur, böylece sayfa oluşturulduktan sonra sunucu olaylarını yanıtlar.
Demos\60.HTML\01.RunTime\29.Tour, 8131 numaralı bağlantı noktasındaki sgc Cloud Console'dur: bir spot ışıklı sekiz adımlı ilk çalıştırma turu, aynı sayfada ikinci bir Yenilikler turu, araç çubuğu düğmelerinde, istatistik kartlarında ve form alanlarında ipuçları ve sunucunun kullanıcı başına kaydettiği bir ilk kullanım hunisi. Tasarım zamanı, Lazarus ve .NET sürümleri bunu yansıtır.
| Online DeneyinTur & İpuçları demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor. | Aç | |
| Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu. | Aç | |
| Tooltip BileşeniDüğmelerde ve alanlarda, aynı demoda tur ile birlikte gösterilen ipuçları. | Aç | |
| Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın. | Aç | |
| Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir. | Aç | |
| FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları. | Aç |