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(ラベル、ヘルプの表示) […]

comment

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

関連記事

no image

グリッドテーブルの列タイプ「カスタム」を利用した場合にマルチセレクトがトグルされないようにする方法

このCookBookでは、グリッドテーブルの列タイプ「カスタム」を利用した場合に、マルチセレクトがトグルされないようにする方法を説明します。 グリッドテーブルでは、行内で参照表示となっている部分をクリ …

no image

テナント環境セットアップ時にテーブルが作成されるよう設定する

e Builderを利用して作成したアプリケーションにおいて、テナント環境セットアップ時に自動でテーブルが作成されるように設定する手順を紹介します。 今回は例として、CookBook:フォームに入力し …

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。 2019 Summer では「URL ○ にアクセスする」でしたが、 201 …

no image

IM-BloomMaker リッチテーブルの行の詳細画面を別タブで開く方法

このCookBookでは、リッチテーブルの行をクリックした時に別タブで詳細画面を開く方法について紹介しています。 リッチテーブルから詳細画面を開く方法は複数ありますが、このCookBookではそのうち …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

RSSRSSRSSRSS