アクションボタン (送信、キャンセル、クリア、リセット) をカスタマイズ
Amplify Studio で生成されたフォームには、送信、キャンセル、クリア または リセット の 3 つのアクションボタンが付属しています。どのボタンが表示されるかは、フォームがレコードを作成するか更新するかによって異なります。
ボタンの位置を変更
フォームの下部 (デフォルト)、上部、または上部と下部にアクションボタンを表示するかを選択できます。
- Amplify Studio から、アクションボタンを選択します
- Display > Position に移動します
- Bottom、Top、または Top & bottom を選択します
送信、キャンセル、クリア、リセットボタンのラベルをカスタマイズ
フォームのユースケースをより適切に説明するために、アクションボタンのラベルをカスタマイズできます。例えば、Submit を Create note に変更することができます。
- Amplify Studio から、アクションボタンを選択します
- Display > Submit button label に移動します
- カスタムボタンラベルを入力します
送信、キャンセル、クリア、リセットボタンの表示状態を切り替え
フォームのユースケースに合わせて、アクションボタンの表示状態をカスタマイズできます。例えば、フォームを閉じるボタンとして X が付いたモーダルにフォームを表示する場合、冗長な Cancel アクションボタンを非表示にすることができます。
- Amplify Studio から、アクションボタンを選択します
- Display > Submit button is visible に移動します
- カスタムボタンラベルを入力します
すべてのフォームアクションボタンを非表示にした場合でも、onChange イベントハンドラー を活用してフォームのライフサイクルを自己管理することができます。これは、明示的なユーザー確認なしにリアルタイムでデータを更新するフォームに便利です。