Accordion

TsgcHTMLComponent_Accordion — renderuje pionowo zwijaną harmonijkę ułożonych w stos, rozwijanych paneli, w Delphi, C++ Builder i .NET.

TsgcHTMLComponent_Accordion

Stos zwijanych paneli zbudowany na elemencie accordion Bootstrap. Dodaj elementy z tytułem i treścią, zaznacz, które mają być początkowo otwarte, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_Accordion

Renderuje

Znaczniki accordion Bootstrap 5

Języki

Delphi, C++ Builder, .NET

Utwórz go, dodaj panele, wyrenderuj

Dodaj każdy panel za pomocą Items.Add, ustaw jego Title, Content i flagę Expanded, a następnie odczytaj HTML.

uses
  sgcHTML_Component_Accordion;

var
  oAcc: TsgcHTMLComponent_Accordion;
begin
  oAcc := TsgcHTMLComponent_Accordion.Create(nil);
  try
    oAcc.AccordionID := 'faq';
    oAcc.Flush := False;
    oAcc.AlwaysOpen := False;

    with oAcc.Items.Add do
    begin
      Title := 'What is sgcHTML?';
      Content := 'A server-side HTML component library.';
      Expanded := True;
    end;
    with oAcc.Items.Add do
    begin
      Title := 'Which languages?';
      Content := 'Delphi, C++ Builder and .NET.';
    end;

    WebModule.Response := oAcc.HTML;   // Bootstrap accordion
  finally
    oAcc.Free;
  end;
end;
// includes: sgcHTML_Component_Accordion.hpp

TsgcHTMLComponent_Accordion *oAcc = new TsgcHTMLComponent_Accordion(NULL);
try
{
  oAcc->AccordionID = "faq";
  oAcc->Flush = false;
  oAcc->AlwaysOpen = false;

  TsgcHTMLAccordionItem *oItem = oAcc->Items->Add();
  oItem->Title = "What is sgcHTML?";
  oItem->Content = "A server-side HTML component library.";
  oItem->Expanded = true;

  oItem = oAcc->Items->Add();
  oItem->Title = "Which languages?";
  oItem->Content = "Delphi, C++ Builder and .NET.";

  String html = oAcc->HTML;   // Bootstrap accordion
}
__finally
{
  delete oAcc;
}
using esegece.sgcWebSockets;

var acc = new TsgcHTMLComponent_Accordion();
acc.AccordionID = "faq";
acc.Flush = false;
acc.AlwaysOpen = false;

var item = acc.Items.Add();
item.Title = "What is sgcHTML?";
item.Content = "A server-side HTML component library.";
item.Expanded = true;

item = acc.Items.Add();
item.Title = "Which languages?";
item.Content = "Delphi, C++ Builder and .NET.";

string html = acc.HTML;   // Bootstrap accordion

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Elementy

Items (TsgcHTMLAccordionItems) przechowuje panele; wywołaj Items.Add, aby dołączyć kolejny i go skonfigurować.

Treść elementu

Każdy element udostępnia Title dla przycisku nagłówka, Content dla treści panelu oraz Expanded, aby uruchomić go w stanie otwartym.

Pojedynczy a wiele

AlwaysOpen pozwala, aby kilka paneli było jednocześnie otwartych; po wyłączeniu otwarcie jednego panelu zwija pozostałe.

Styl

Flush usuwa zewnętrzne obramowania i zaokrąglone narożniki, tworząc harmonijkę od krawędzi do krawędzi.

Tożsamość

AccordionID ustawia identyfikator kontenera używany do powiązania rodzica zwijania dla paneli.

Wynik

HTML zwraca pełne znaczniki accordion — udostępnij je lub przypisz do treści strony szablonu.

Poznawaj dalej

Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.
Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.
CennikLicencje Single, Team i Site z pełnym kodem źródłowym.

Gotowy, aby zacząć?

Pobierz bezpłatną wersję próbną i zacznij budować interfejsy webowe w Delphi, C++ Builder i .NET.