CookBook

IM-BloomMaker Modifier の使い方

投稿日:

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。
modifier は、同じく 2020 Summer から利用可能になったコンテンツ種別「Bulma」を使用している場合のみ参照できる情報です。
modifier には CSS フレームワーク「Bulma」が提供している CSS Class の一部が定義されており、この情報を用いることで独自に CSS を定義しなくとも文字や背景の色を変えたり、レスポンシブな画面を作成できます。

$env.modifier の内容

modifier には以下の情報が含まれています。

名前 説明
color 文字色に関する Class が定義されています。
backgroundColor 背景色に関する Class が定義されています。
hide エレメント非表示用の Class が定義されています。

使い方

modifier のそれぞれの情報の使い方について説明します。

  1. color と backgroundColor の使い方
  2. hide の使い方

1. color と backgroundColor の使い方

color は文字の色を指定し、backgroundColor は背景色を指定できます。
今回は、以下のようなボックスとラベルエレメントに背景色と文字色を設定してみます。

  1. コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。
  2. パレットの「レイアウト(Bulma)」カテゴリの「ボックス」エレメントをページに配置してください。

  3. パレットの「汎用」カテゴリの「ラベル」エレメントを「ボックス」エレメントの配下に配置してください。

  4. 右ペインの変数タブを開き、「新規作成」ボタンをクリックしてください。

  5. 変数エディタダイアログで以下の通り入力し、「決定」ボタンをクリックしてください。

    項目 設定値
    キー名 classes
    値の型 文字列
    配列の次元数 1次元配列
    配列の要素数 2
  6. 変数「classes」の配下の「0」の編集ボタンをクリックしてください。

  7. 変数エディタダイアログの「定数・入力・多言語・環境から」のテキストボックスの検索アイコンをクリックしてください。

  8. 変数セレクタダイアログの「環境」タブを選択してください。

  9. 変数ツリーから、「$env.modifier.color.info」を選択し、「決定」ボタンをクリックしてください。

  10. 変数エディタダイアログの「決定」ボタンをクリックしてください。

  11. 上記と同様の手順で、変数「classes」配下の「1」に「$env.modifier.backgroundColor.dark」を設定してください。

  12. 配置した「ボックス」エレメントをクリックしてください。

  13. 右ペインのプロパティタブを開き、「CSSクラス」カテゴリの「クラス名」プロパティを変数値に切り替えてください。

  14. 「クラス名」プロパティのテキストボックスに、前項で作成した変数「$variable.classes」を設定してください。

  15. 「プレビュー」ボタンをクリックしてください。

  16. ボックスの背景が黒色、文字が青色になっていることを確認してください。
    うまくいかない場合は手順に誤りがないか確認してください。

2. hide の使い方

hide は、設定した値に応じて特定の画面サイズでエレメントを非表示にできます。
例として、左側にメニューがあるような画面で、モバイル端末で画面を表示した場合は左側のメニューを非表示にしたい場合などに有効です。

PC 版

モバイル版

以下のサンプルを使用して説明します。

  1. 以下のインポートデータをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
    cookbook_185244_im_bloommaker.zip

  2. 上記のサンプルをインポート後、コンテンツ一覧画面の「im_cookbook」 > 「im_cookbook_185244_modifier_hide」のコンテンツのデザイナ画面を開いてください。

  3. コンテナページに配置されている「フレックスコンテナ」エレメント配下の左側の「フレックスアイテム」エレメントをクリックしてください。

  4. 右ペインのプロパティタブを開き、「CSSクラス」カテゴリの「クラス名」プロパティを表示してください。

変数値で「$env.modifier.hide.mobile」が設定されています。この変数に格納されている Class は、ウインドウの横幅が 768px 以下の場合にエレメントを非表示にします。
プレビュー画面を開き、画面のサイズを自由に変更してみてください。モバイル用のサイズに変更すると左側のメニューが非表示になるはずです。

他に、どのサイズでエレメントが非表示になるかについては以下のドキュメントを参照してください。
Bulma Responsive helpers

-CookBook
-

執筆者:


comment

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

関連記事

no image

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

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

no image

intra-mart WebPlatform 7.2 の Docker を作成する

この CookBook では、intra-mart WebPlatform 7.2 の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 intra-mart WebPl …

no image

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …

no image

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

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

no image

IM-BloomMaker IE で画面を開くと「Internet Explorer は対応していません。」と表示するアプリケーションの作成方法

この CookBook では、 IE で画面を開くとダイアログで「Internet Explorer は対応していません。」と表示するアプリケーションを作成します。 Accel Platform 20 …

RSSRSSRSSRSS