InputGroup
TsgcHTMLComponent_InputGroup — Delphi、C++ Builder、.NET で、前置き・後置きのアドオンテキスト(例えば $….00 や @username)を備えた Bootstrap 入力欄をレンダリングします。
TsgcHTMLComponent_InputGroup — Delphi、C++ Builder、.NET で、前置き・後置きのアドオンテキスト(例えば $….00 や @username)を備えた Bootstrap 入力欄をレンダリングします。
form-control の前後に任意の前置き・後置きアドオンテキストを備えた Bootstrap の input-group を出力する入力コンポーネントです。テキストと入力欄を設定してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_InputGroup
Bootstrap 5 の input-group マークアップ
Delphi, C++ Builder, .NET
PrependText/AppendText と入力欄のプロパティを設定してから、HTML を読み取ります — または、静的な Build ヘルパーを呼び出して一行で記述します。
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");
最もよく使うメンバーです。
PrependText は先頭の input-group-text アドオンをレンダリングし、AppendText は末尾のものをレンダリングします。いずれかを空にすると、省略されます。
InputName、InputValue、Placeholder は内側の form-control を構成します。InputType は生の HTML 型文字列を設定します。
InputTypeEnum(TsgcHTMLInputType)は、型文字列を手作業でコーディングせずに itText、itEmail、itNumber、itPassword、itTel などを選択します。
Size(TsgcHTMLInputGroupSize)は、Bootstrap の input-group-sm/-lg 修飾子を追加するために igsDefault、igsSmall、igsLarge を選択します。
Build(prepend, inputName, placeholder, append) — および TsgcHTMLInputType を取るオーバーロード — は、インスタンスを管理せずに一行でマークアップを返します。
HTML は完全な input-group の <div> を返します。GroupID は、スクリプトやスタイル設定のためにその id 属性を設定します。