CookBook

IM-BloomMaker フォーム部品(Bulma)のグループ化と結合の使い方

投稿日:

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった
コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したグループ化と結合について紹介いたします。

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_185241_bloommaker-data
IM-BloomMaker のインポート画面からインポートしてください。

レシピ

  1. グループ化の使い方
    グループ化の設定方法を説明します。
    「テキスト入力」に単位を付けるやり方や、送信ボタンとキャンセルボタンの作成方法も紹介します。

  2. 結合の使い方
    結合の設定方法と、検索ボックス風の見た目の作り方を説明します。

グループ化の使い方

グループ化を利用すると、複数のフォーム部品を横並びにして配置することができます。

  1. コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。

  2. 「フォーム部品(Bulma)」カテゴリにある「フィールド」を配置してください。

  3. 「フィールド」の中に「テキスト入力」を2つ配置してください。

    ここでプレビューを確認すると、2つの「テキスト入力」は縦並びで表示されています。

    横並びに表示されるようにしていきましょう。

  4. 「フィールド」のgroupingプロパティで「grouped」を選択してください。

  5. プレビューで確認します。

    横並びに表示することができました。
    また、groupingプロパティで「grouped centered」を選択すると、中央揃えにすることができます。

    「grouped right」を選択すると、右揃えにすることができます。

    「grouped multiline」を選択すると、多数のエレメントを配置したとき、複数行に折り返して表示することができます。

続けて、「テキスト入力」に単位を付ける便利な方法をご紹介します。

  1. 「テキスト入力」のshowLeftIconプロパティのチェックを2つとも外してください。
    チェックを外すことで、アイコンを非表示にします。

  2. 右側の「テキスト入力」の中にある「テキスト入力要素」を選択し、readonlyプロパティとstaticプロパティにチェックを入れてください。

    readonlyプロパティにチェックを入れると、エレメントが読み取り専用となり、入力値を編集できなくなります。
    staticプロパティにチェックを入れると、エレメントの枠を非表示にします。
    このように設定すると「フィールド」内で「ラベル」のようなエレメントとして使うことができます。

  3. 続けて、valueプロパティに使用したい単位を入力してください。
    ここでは「cm」と入力します。

  4. プレビューで確認します。

    「テキスト入力 + 単位」の表示ができました。
    「テキスト入力」以外にも「プルダウン」など他のフォーム部品とも組み合わせることができるので、是非利用してみてください。

今度はグループ化を使って、送信ボタンとキャンセルボタンを作成するやり方をご紹介します。

  1. 「フォーム部品(Bulma)」カテゴリにある「フィールド」を配置してください。

  2. 「フィールド」の中に「ボタン」を2つ配置してください。

  3. 1つ目の「ボタン」の中にある「ボタン要素」のプロパティを設定していきます。
    textContentプロパティに「Submit」と入力し、colorプロパティで「primary」を選択してください。

  4. 2つ目の「ボタン」の中にある「ボタン要素」のプロパティを設定していきます。
    textContentプロパティに「Cancel」と入力し、colorプロパティで「light」を選択してください。

  5. 「フィールド」のgroupingプロパティで「grouped centered」を選択してください。

  6. プレビューで確認します。

    送信ボタンとキャンセルボタンをグループ化することができました。
    ボタンを並べるときにもグループ化が便利ですね。

結合の使い方

結合を利用すると、複数のフォーム部品をくっつけて配置することができます。

  1. コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。

  2. 「フォーム部品(Bulma)」カテゴリにある「フィールド」を配置してください。

  3. 「フィールド」の中に「テキスト入力」と「ボタン」を配置してください。

  4. 「フィールド」のaddonプロパティで「addons」を選択してください。

  5. プレビューで確認します。

    「テキスト入力」と「ボタン」が結合して表示されました。
    また、addonプロパティで「addons centered」を選択すると、中央揃えにすることができます。

    「addons right」を選択すると、右揃えにすることができます。

続けて、検索ボックス風の見た目を作っていきましょう。

  1. 「テキスト入力」のプロパティを設定していきます。
    showLeftIconプロパティのチェックを外し、expandedプロパティにチェックを入れてください。

    expandedプロパティにチェックを入れると、エレメントの幅を最大にします。

  2. 「ボタン」の中にある「ボタン要素」のプロパティを設定していきます。
    textContentプロパティに「Search」と入力し、colorプロパティで「info」を選択してください。

  3. プレビューで確認します。

    検索ボックス風の見た目ができあがりました。

さいごに

このCookBookでは、「フォーム部品(Bulma)」を使用したグループ化と結合について紹介しました。
是非、様々なフィールドエレメントでグループ化・結合を試してみてください。

また、Bulmaの公式ドキュメントも参考にしてください。
グループ化
https://bulma.io/documentation/form/general/#form-group
結合
https://bulma.io/documentation/form/general/#form-addons

-CookBook
-

執筆者:


  1. […] てください。 ・grouping, addon(グループ化、結合) ・showLabel, showHelp(ラベル、ヘルプの表示) […]

IM-BloomMaker フォーム部品(Bulma)のフィールド、水平フィールドの利用方法 – intra-mart Developer Site へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

IM-BloomMaker 繰り返しエレメントでの変数の使い方

このCookBookでは、IM-BloomMakerの繰り返しエレメントと変数の使い方について紹介しています。 サンプルでは、1・2・3次元配列の変数を使用して繰り返しエレメントを表示します。 完成イ …

no image

Solr の Docker を作成する。

この CookBook では、Solr の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Solr の Docker イメージを作成します 実行します 1. ベースイ …

BloomMakerでワークフロー処理モーダルを利用してWorkflowコンテンツを作成する

このCookBookでは、2020 Spring(8.0.25)でリリースした下記の機能を利用して、Workflowのコンテンツを作成する方法を紹介します。 IM-BloomMakerのアクションに、 …

no image

バージョンアップを認めずパッチのみを許可する module.xml の依存関係の指定方法の書き方

この CookBook では、module.xml の依存関係の書き方について紹介しています。 記事のタイトルにあるように、モジュールを特定のバージョンのパッチまでに依存する方法についてご紹介します。 …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(テーブルアイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、テーブルアイテムからテーブルアイテムへ値を渡す方法について紹介します。 今回は例として、グリッドテーブルを利用し …

RSSRSSRSSRSS