基本的なコントロールの追加

improve this page | report issue

アプリケーションへの基本的なコントロールの追加

IBM Digital App Builder には、ボタン、見出し (Heading)、画像 (Image)、およびラベルといった基本的な UI コントロールがあります。

設計 (Design) モードでの基本的なコントロールの追加

これらのコントロールのいずれかをアプリケーションに追加するには、単純にコントロールをキャンバスにドラッグ・アンド・ドロップし、プロパティーおよびアクションを構成します。

  • 見出し (Heading) - このコントロールを使用して、ページに見出しを追加します。 「見出し (Heading)」コントロールには、以下のプロパティーがあります。
    • テキストの値
    • スタイル (位置合わせ、テキスト・カラー)。 このコントロールには使用可能なアクションはありません。
  • ボタン - このコントロールを使用して、ボタンを追加し、アクションを関連付けます。 「ボタン」コントロールには、以下のプロパティーがあります。
    • テキストの値
    • スタイル (位置合わせ、テキスト・カラー、背景色、フォント幅) 「アクション」タブから、このボタンにアクションを割り当てることができます。 「クリックされたときのナビゲート先 (On click Navigate to)」ボタンを選択し、ページ名を選択して別のページに移動するか、「+」をクリックして新規ページを追加します。
  • 画像 (Image) - このコントロールを使用して、画像を追加します。 ローカル画像として画像ソースを指定するか、URL を指定します。 画像をアップロードし、それをアプリケーション・ソースに追加することもできます。 「アクション」タブから、この画像にアクションを割り当てることができます。 「クリックされたときのナビゲート先 (On click Navigate to)」ボタンを選択し、ページ名を選択して別のページに移動するか、「+」をクリックして新規ページを追加します。
  • ラベル - このコントロールを使用して、ラベルを追加します。 「テキストの値」「スタイル」 (位置合わせ、テキスト・カラー、フォント幅) を変更できます。 このコントロールには使用可能なアクションはありません。

設計モードのプロジェクトに基本的なコントロールを追加するには、以下のようにします。

  1. 設計するページにナビゲートします。
  2. 「コントロール」をクリックして、コントロールのパネルを表示します。
  3. 必要なコントロールをドラッグ・アンド・ドロップし、ページを設計します。
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on May 13, 2020