検索フィールド

検索フィールドは検索文字列を入力するための 1 行テキストフィールドです。コンポーネント内の検索アイコンをクリックする、または Enter キー押下でアクションが起動します。

ノート

アクションが動作しない場合は、クリックイベントが[ACTION]になっているかご確認ください。

ダイアログプロパティ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列		Search Field
幅	文字列		222
高さ	文字列		55
X	文字列
Y	文字列
スタイル	選択	アウトライン フィル スタンダード	アウトライン
色	文字列 カラーピッカー
背景色	文字列 カラーピッカー
ラベル色	文字列 カラーピッカー
入力文字色	文字列 カラーピッカー
非アクティブ	真偽	オン オフ	オフ
読み取り専用	真偽	オン オフ	オフ
表示	真偽	オン オフ	オン
プレースホルダ	文字列
ヘルパーテキスト	文字列
クリックイベント	選択	なし アクション	アクション
値	文字列
エラー	-

アクションプロパティ

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string		Search Field
幅	width	string		222
高さ	height	string		55
X	x	string
Y	y	string
スタイル	variant	string	outlined filled standard	outlined
色	color	string
背景色	backgroundColor	string
ラベル色	labelColor	string
入力文字色	inputColor	string
非アクティブ	disabled	boolean	true false	false
読み取り専用	readOnly	boolean	true false	false
表示	visibility	boolean	true false	true
プレースホルダ	placeholder	string
ヘルパーテキスト	helperText	string
値	value	string
エラー	error	boolean

ノート

• [id]プロパティはアクションで設定はできません。
• [幅]、[高さ]プロパティ値には下記を入力できます。
  px で表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • 数値%
  • calc()関数
• [X]、[Y]プロパティ値には下記を入力できます。
  px で表示したい場合は数値のみを指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • calc()関数
• calc()関数は CSS の関数で、計算を可能にする関数です。（例：calc(100% - 30px)）
  calc()関数で使用できる単位は 「%」と 「px」です。それ以外の単位（例：em,rem など）はサポート外になります。
• calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。
  プレビューを用いてご確認ください。

イベント

イベント名	説明
onclick	検索アイコンクリック時または Enter キー押下時に発生します。