パスワード

パスワードを入力するコンポーネントです。特徴としてパスワード可視トグルを付与できます。

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

項目	プロパティ	データ型	オプション	デフォルト値
id	id	string		自動設定
ラベル	label	string		Password
幅	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
必須	required	boolean	true false	false
表示	visibility	boolean	true false	true
可視トグル	visibilityToggle	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()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。
プレビューを用いてご確認ください。
[必須]プロパティをONにした場合、ラベルの横に * マークが付きます。
必須チェックは自動では行いませんので、アクションを定義してください。

イベント

イベント名	説明
onchange	値の変更が行われ、カーソルが外れた時に発生します。