Componente InputGroup — sgcHTML

De un vistazo

TsgcHTMLComponent_InputGroup

Un componente de input que genera un input-group de Bootstrap con texto complementario opcional antepuesto y pospuesto alrededor de un form-control. Define los textos y el input, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_InputGroup

Genera

Marcado input-group de Bootstrap 5

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade complementos, genéralo

Define PrependText/AppendText y las propiedades del input, y luego lee HTML — o llama al método estático Build para hacerlo en una sola línea.

uses
  sgcHTML_Enums, sgcHTML_Component_InputGroup;

var
  oGroup: TsgcHTMLComponent_InputGroup;
begin
  oGroup := TsgcHTMLComponent_InputGroup.Create(nil);
  try
    oGroup.PrependText := '$';
    oGroup.AppendText := '.00';
    oGroup.InputName := 'amount';
    oGroup.InputTypeEnum := itNumber;
    oGroup.Placeholder := '0';
    oGroup.Size := igsLarge;

    WebModule.Response := oGroup.HTML;   // <div class="input-group">...
  finally
    oGroup.Free;
  end;
end;

// Or the static one-liner (prepend, name, placeholder, append):
Result := TsgcHTMLComponent_InputGroup.Build('@', 'user', 'username');

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_InputGroup.hpp

TsgcHTMLComponent_InputGroup *oGroup = new TsgcHTMLComponent_InputGroup(NULL);
try
{
  oGroup->PrependText = "$";
  oGroup->AppendText = ".00";
  oGroup->InputName = "amount";
  oGroup->InputTypeEnum = itNumber;
  oGroup->Placeholder = "0";
  oGroup->Size = igsLarge;

  String html = oGroup->HTML;   // <div class="input-group">...
}
__finally
{
  delete oGroup;
}

// Or the static one-liner:
String html = TsgcHTMLComponent_InputGroup::Build("@", "user", "username");

using esegece.sgcWebSockets;

var group = new TsgcHTMLComponent_InputGroup();
group.PrependText = "$";
group.AppendText = ".00";
group.InputName = "amount";
group.InputTypeEnum = TsgcHTMLInputType.itNumber;
group.Placeholder = "0";
group.Size = TsgcHTMLInputGroupSize.igsLarge;

string html = group.HTML;   // <div class="input-group">...

// Or the static one-liner:
string html2 = TsgcHTMLComponent_InputGroup.Build("@", "user", "username");

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Complementos

PrependText genera un complemento input-group-text al inicio; AppendText genera uno al final. Deja cualquiera de ellos vacío para omitirlo.

Input

InputName, InputValue y Placeholder rellenan el form-control interno; InputType define la cadena de tipo HTML directa.

Tipo de input

InputTypeEnum (TsgcHTMLInputType) elige itText, itEmail, itNumber, itPassword, itTel y más sin escribir a mano la cadena de tipo.

Tamaño

Size (TsgcHTMLInputGroupSize) elige igsDefault, igsSmall o igsLarge para añadir el modificador input-group-sm/-lg de Bootstrap.

Método estático

Build(prepend, inputName, placeholder, append) — y una sobrecarga que recibe un TsgcHTMLInputType — devuelve el marcado en una línea sin gestionar una instancia.

Salida

HTML devuelve el <div> input-group completo; GroupID define su atributo id para scripting o estilos.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

InputGroup