Input with Icon

Input with Icon UIパターンを使用すると、エンドユーザーがアイコン形式のヒントを利用しながらデータを入力することができます。

Input with Icon UIパターンには、ユーザーのデータ入力をサポートするアイコンとプレースホルダテキストが含まれます。必要な入力の種類を例示することによりユーザーの理解を支援します。

Input with Iconの使用方法

1.Service StudioのツールボックスでInput with Iconを検索します。

Input with Iconウィジェットが表示されます。

![](<images/inputwithicon-1-ss.png>)

1.ツールボックスから、Input with Iconウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/inputwithicon-2-ss.png>)

1.Inputウィジェットを選択し、［Properties］タブの［Variable］ドロップダウンで［New Local Variable］を選択します。

![](<images/inputwithicon-3-ss.png>)

1.変数の名前を入力します。この例では、「Username」と入力し、Data Typeプロパティを［Text］に設定しています。

![](<images/inputwithicon-5-ss.png>)

1.Inputウィジェットをもう一度選択し、［Properties］タブで、入力ボックスに表示するテキスト（求められる値に関する説明）をPromptプロパティに入力します。この例では、「Username」と入力しています。

![](<images/inputwithicon-9-ss.png>)

1.アイコンを変更するため、Iconウィジェットを選択し、［Name］ドロップダウンで入力ボックスに表示するアイコンを選択します。この例では、［user］アイコンを選択しています。

![](<images/inputwithicon-6-ss.png>)

1.［Properties］タブで（オプションの）プロパティを設定し、Input with Iconのルックアンドフィールを変更できます。

![](<images/inputwithicon-7-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。