InputGroup

TsgcHTMLComponent_InputGroup — Delphi、C++ Builder、.NET で、前置き・後置きのアドオンテキスト(例えば $.00@username)を備えた Bootstrap 入力欄をレンダリングします。

TsgcHTMLComponent_InputGroup

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");

主なプロパティとメソッド

最もよく使うメンバーです。

Addons

PrependText は先頭の input-group-text アドオンをレンダリングし、AppendText は末尾のものをレンダリングします。いずれかを空にすると、省略されます。

Input

InputNameInputValuePlaceholder は内側の form-control を構成します。InputType は生の HTML 型文字列を設定します。

Input type

InputTypeEnumTsgcHTMLInputType)は、型文字列を手作業でコーディングせずに itTextitEmailitNumberitPassworditTel などを選択します。

Sizing

SizeTsgcHTMLInputGroupSize)は、Bootstrap の input-group-sm/-lg 修飾子を追加するために igsDefaultigsSmalligsLarge を選択します。

Static helper

Build(prepend, inputName, placeholder, append) — および TsgcHTMLInputType を取るオーバーロード — は、インスタンスを管理せずに一行でマークアップを返します。

Output

HTML は完全な input-group<div> を返します。GroupID は、スクリプトやスタイル設定のためにその id 属性を設定します。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET の Web アプリに入力グループを追加しましょう。