Image
TsgcHTMLComponent_Image — renderuje obraz Bootstrap z kształtem, responsywnym rozmiarem, leniwym ładowaniem oraz opcjonalnym lightboxem i podpisem, w Delphi, C++ Builder i .NET.
TsgcHTMLComponent_Image — renderuje obraz Bootstrap z kształtem, responsywnym rozmiarem, leniwym ładowaniem oraz opcjonalnym lightboxem i podpisem, w Delphi, C++ Builder i .NET.
Element obrazu ze stylowaniem Bootstrap. Ustaw źródło i tekst alternatywny, wybierz kształt, przełącz responsywność i leniwe ładowanie, a następnie odczytaj właściwość HTML.
TsgcHTMLComponent_Image
Znaczniki obrazu Bootstrap 5
Delphi, C++ Builder, .NET
Przypisz Src i Alt, wybierz Shape, przełącz Responsive, LazyLoad i Lightbox, a następnie odczytaj HTML — albo użyj statycznej, jednolinijkowej metody pomocniczej Build.
uses
sgcHTML_Enums, sgcHTML_Component_Image;
var
oImg: TsgcHTMLComponent_Image;
begin
oImg := TsgcHTMLComponent_Image.Create(nil);
try
oImg.Src := '/img/team.jpg';
oImg.Alt := 'Our team';
oImg.Shape := isRounded;
oImg.Responsive := True;
oImg.Lightbox := True;
oImg.Caption := 'The team at work';
WebModule.Response := oImg.HTML; // <img> markup
finally
oImg.Free;
end;
end;
// Or in a single line with the static helper:
Result := TsgcHTMLComponent_Image.Build('/img/team.jpg', 'Our team',
isRounded, True);// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Image.hpp
TsgcHTMLComponent_Image *oImg = new TsgcHTMLComponent_Image(NULL);
try
{
oImg->Src = "/img/team.jpg";
oImg->Alt = "Our team";
oImg->Shape = isRounded;
oImg->Responsive = true;
oImg->Lightbox = true;
oImg->Caption = "The team at work";
String html = oImg->HTML; // <img> markup
}
__finally
{
delete oImg;
}
// Or in a single line with the static helper:
String html = TsgcHTMLComponent_Image::Build("/img/team.jpg", "Our team",
isRounded, true);using esegece.sgcWebSockets;
var img = new TsgcHTMLComponent_Image();
img.Src = "/img/team.jpg";
img.Alt = "Our team";
img.Shape = TsgcHTMLImageShape.isRounded;
img.Responsive = true;
img.Lightbox = true;
img.Caption = "The team at work";
string html = img.HTML; // <img> markup
// Or in a single line with the static helper:
string oneLine = TsgcHTMLComponent_Image.Build("/img/team.jpg", "Our team",
TsgcHTMLImageShape.isRounded, true);Składniki, po które sięgasz najczęściej.
Src ustawia adres URL obrazu, a Alt dostępny tekst alternatywny.
Shape (TsgcHTMLImageShape: isRounded, isCircle, isThumbnail) nadaje styl narożnikom i obramowaniu.
Responsive stosuje img-fluid, dzięki czemu obraz skaluje się do swojego kontenera; Width i Height ustawiają jawne wymiary.
LazyLoad dodaje loading="lazy", dzięki czemu obrazy poza ekranem ładują się dopiero, gdy są potrzebne.
Lightbox opakowuje obraz w link do źródła w pełnym rozmiarze; Caption opakowuje go w element figure z podpisem; ImageID ustawia identyfikator DOM.
Build(aSrc, aAlt, aShape, aResponsive) zwraca HTML obrazu w pojedynczym statycznym wywołaniu.