CookBook

IM-BloomMaker Bulma Theme Colored について

投稿日:

この CookBook では intra-mart Accel Platform 2021 Summer から利用可能になった
コンテンツ種別「Bulma Theme Colored」について紹介します。

Bulma Theme Colored とは

「Bulma」と同様のエレメントが使用できるコンテンツ種別です。
iAP のデザインに合うようにエレメントの配色が調整されているため
コンテンツ種別「imui」で作成された画面とも合うようになっています。

「Bulma」と比較して主に以下の違いがあります。

  • 一部のエレメントが iAP のテーマ色と同系統の配色になる
  • プロパティの color 設定で一部の色が「Bulma」ではなく独自の配色になる
  • iAP に合わせたフォントになっている

設定方法

コンテンツを新規作成します。
コンテンツ種別「Bulma Theme Colored」を選択します。

「Bulma」と「Bulma Theme Colored」は作成後も相互に変更可能です。

Bulma との比較

エレメントの配色

それぞれ以下のシチュエーションで変化します。

デフォルト

カテゴリ エレメント
レイアウト(Bulma) ヒーロー
パーツ(Bulma) タグ
コンポーネント(Bulma) メッセージ

選択した時(is-active クラスが付与されている時)

カテゴリ エレメント
コンポーネント(Bulma) ナビゲーションバーリンクアイテム
メッセージ
タブ
ドロップダウンリンクアイテム
メニュー

選択した時(is-selected クラスが付与されている時)、ホバーした時

カテゴリ エレメント
レイアウト(Bulma) テーブルコンテナ
繰り返し(Bulma) テーブルコンテナ(繰り返し)

コンテンツ種別:Bulma
テーマ:intra-mart Accel Platform Slim Side Menu テーマ (黄緑 (Greenery))

コンテンツ種別:Bulma Theme Colored
テーマ:intra-mart Accel Platform Slim Side Menu テーマ (黄緑 (Greenery))

コンテンツ種別:Bulma Theme Colored
テーマ:intra-mart Accel Platform Slim Side Menu テーマ (赤)

color プロパティの設定

primary がブルー、info が水色に変更されました。
それ以外は一部(black, light 等)を除き一段階暗い配色になっています。

左:Bulma
右:Bulma Theme Colored

フォント

iAP に合わせたフォントになっています。
フォントの変更により文字の幅も変わるため改行の設定をしている場合、文字の折り返し位置が変わることがあります。

左:Bulma
右:Bulma Theme Colored

コンテンツ種別「imui」と比較した場合、フォントの種類は同じになりますが色・サイズは変わります。
以下の画像ではラベルの横幅を 200px にし改行を設定しています。

左:imui
右:Bulma Theme Colored

-CookBook
-

執筆者:


comment

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

関連記事

BloomMakerとLogicDesignerでWorkflowコンテンツを作成する

このCookBookでは、BloomMakerとLogicDesignerを利用してWorkflowのコンテンツを作成する方法を紹介します。 2019 Winter(8.0.24)で、以下の機能をリリ …

no image

Payara 管理画面で行った設定を CUI で実施する方法

この CookBook では、Payara の Asadmin Recorder 機能について紹介しています。 Asadmin Recorder 機能についての詳細を知りたい方は Asadmin Re …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

no image

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

画面アイテム「スプレッドシート」の特定セルをIM-ContentsSearchの検索対象にする方法

画面アイテム「スプレッドシート」の特定セルをIM-ContentsSearchの検索対象にする方法について紹介します。 本CookBookでは、スプレッドシート上の個人情報や、外部に公開したくない内容 …