Input with Icon

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

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

Input with Iconの使用方法

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

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

   

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

   

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

   

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

   

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

   

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

   

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

   

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