検索フィールド

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

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	ラベル ^L	文字列	Search Field	label	string	Search Field	コンポーネントのラベル
3	幅	文字列	222	width	string	222	コンポーネントの幅
4	高さ	文字列	55	height	string	55	コンポーネントの高さ
5	X	文字列		x	string		X座標位置
6	Y	文字列		y	string		Y座標位置
7	位置固定	真偽	OFF	lock	boolean	false	ONの場合は画面をスクロールしてもコンポーネントが固定されて表示されます。 OFFの場合は画面をスクロールするとそれに合わせてコンポーネントも動きます。 `v4.1.0`で追加されたプロパティ
8	スタイル	選択 1. アウトライン 2. フィル 3. スタンダード	アウトライン	variant	string	outlined	コンポーネントのスタイル
9	旧デザイン	真偽	OFF				スタイルがスタンダードの場合のみ有効になります。 ONの場合は旧デザインで表示されます。 OFFの場合は新デザインで表示されます。 `v4.1.0`で追加されたプロパティ
10	色	文字列カラーピッカー		color	string		コンポーネントの色
11	背景色	文字列カラーピッカー		backgroundColor	string		背景色
12	ラベル色	文字列カラーピッカー		labelColor	string		ラベルの色
13	入力文字色	文字列カラーピッカー		inputColor	string		入力文字の色
14	非アクティブ	真偽	OFF	disabled	boolean	false	非アクティブ状態
15	読み取り専用	真偽	OFF	readOnly	boolean	false	読み取り専用状態
16	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
17	プレースホルダ	文字列		placeholder	string		プレースホルダテキスト
18	ヘルパーテキスト	文字列		helperText	string		ヘルパーテキスト
19	クリックイベント	選択 1. なし 2. アクション 3. 切り離されたアクション	アクション				クリック時のイベント切り離されたアクションは`v4.1.0`で選択可能になりました。
20	値	文字列		value	string		検索フィールドの値
21	エラー			error	boolean	false	エラー状態
22	切り離されたアクション	選択 1.[切り離されたアクションのID]		detachedAction	string		切り離されたアクションを設定 `v4.1.0`で追加されたプロパティ
23	タブによるフォーカス	選択 1.[コンポーネントのID]		tabFocus	string		次フォーカスのコンポーネント指定 `v3.3.0`で追加されたプロパティ

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

イベント

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