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では、「intra-mart Accel Collaboration」のスケジュール機能において、スマートフォン版の画面から添付ファイルをダウンロードできるようにする方法について紹 …

no image

Docker Swarm を利用して Resin のクラスタリングを構築する。

この CookBook では、Docker Swarm を利用して Resin のクラスタリングを構築する手順について紹介しています。 Docker Swarm を利用することで、複数マシンにまたがっ …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

IM-LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法

このCookBookでは、LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法について紹介しています。 承認ノードの到達処理で、申請者を参照者として登録し …

no image

OAuth2.0 の アクセストークンを Box から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Box から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストークンを …

RSSRSSRSSRSS