見出しＨ３（任意）
補足事項（任意）
成功メッセージを表示するボックスです。
成功
データの取得に成功しました。
一覧を表示します。
情報メッセージを表示するボックスです。
情報
文書が登録されていません。
警告メッセージを表示するボックスです。
警告
条件に一致する情報が見つかりませんでした。
検索条件を変更してください。
注意メッセージを表示するボックスです。
注意
表示アイコンが設定されていません。
標準のアイコンを表示します。
オペレーションボックスは、ページを構成するフォーム部品や要素を囲むボックスです。
ツールボックスは、ページ内の要素をひとまとめにするタイトル付のボックスです。必要に応じてツールバーの表示も可能です。
| No | クラス名 | 役割・配置先 | 必須 | 備考 |
|---|---|---|---|---|
| 1 | .imui-box-toolbox | 外枠 | ||
| 2 | .imui-box-toolbox-title | タイトルバー | No1の中に配置。タイトルはh2タグまたはh3タグの中。 | |
| 3 | .imui-toolbar-wrap | ツールバー | .imui-toolbar-wrapの中は、ツールボックス内ツールバーのクラスと役割を参照 | |
| 4 | .imui-box-toolbox-content | ツールボックスの内容 | No1の中に配置 |
| No | クラス名 | 役割・配置先 | 備考 |
|---|---|---|---|
| 1 | .imui-toolbar-wrap | 外枠。ツールバー外側から１番目に配置。 | |
| 2 | .imui-box-toolbar-inner | 内枠。ツールバー外側から２番目に配置。 | No1の中に配置 |
| 3 | .imui-list-box-toolbar | ツールバー左側 | No2の中に配置 |
| 4 | .imui-toolbar-icon | 処理リンクまたは処理アイコン | No3,5の中に配置 |
| 5 | .imui-list-box-toolbar-utility | ツールバー右側 | No2の中に配置 |
補足ボックスは、画面の操作方法や注意事項を表示するボックスです。
アイコンと文章を横に並べて使用する場合は、上揃えと中央揃えを用意しています。
補足内容を記述
1行文章。アイコンを組み合わせることも可能です。アイコンは任意の画像を指定します。
2行文章。アイコンを組み合わせることも可能です。
アイコンは任意の画像を指定します。
3行文章。
アイコンを組み合わせることも可能です。
アイコンは任意の画像を指定します。
1行文章。アイコンと文字列の縦位置中央寄せも可能です。アイコンは任意の画像を指定します。
2行文章。アイコンと文字列の縦位置中央寄せも可能です。
アイコンは任意の画像を指定します。
3行文章。
アイコンと文字列の縦位置中央寄せも可能です。
アイコンは任意の画像を指定します。
色つきヘッダボックスは、ページ内の要素をひとまとめにするテーマカラー背景色のタイトル付のボックスです。必要に応じてツールバーの表示も可能です。
| ユーザID | aoyagi |
|---|---|
| 氏名 | 青柳辰巳 |
| シメイカナ | アオヤギタツミ |
| 電話番号 | |
|---|---|
| 内線番号 |
| No | クラス名 | 役割・配置先 | 必須 | 備考 |
|---|---|---|---|---|
| 1 | .imui-box-heading-part | 外枠 | ||
| 2 | .imui-box-heading h2 | タイトル | 見出しは、h2タグの中に記述します。背景色は、テーマカラーです。 | |
| 3 | .imui-list-heading-icon | タイトルの右側に配置するアイコン群を囲む | アイコンは、liタグを使用して配置します。 | |
| 4 | .imui-toolbar-wrap | ツールバー | .imui-toolbar-wrapの中は、色つきヘッダボックス内ツールバーのクラスと役割を参照 | |
| 5 | .imui-box-part-content | コンテンツ全体を囲む | ||
| 6 | .imui-box-part-content-heading h3 | コンテンツの見出し | 見出しは、h3タグの中に記述します。 | |
| 7 | .imui-box-part-supplementation span | コンテンツの補足事項 | 補足内容は、spanの中に記述します。 |
| No | クラス名 | 役割・配置先 | 備考 |
|---|---|---|---|
| 1 | .imui-toolbar-wrap | 外枠。ツールバー外側から１番目に配置。 | |
| 2 | .imui-box-toolbar-inner | 内枠。ツールバー外側から２番目に配置。 | No1の中に配置 |
| 3 | .imui-list-box-toolbar | ツールバー左側 | No2の中に配置 |
| 4 | .imui-toolbar-icon | 処理リンクまたは処理アイコン | No3,5の中に配置 |
| 5 | .imui-list-box-toolbar-utility | ツールバー右側 | No2の中に配置 |
処理リンクや処理ボタンを横並びで配置するためのコンテナです。
例：一覧テーブルに対しての処理リンクを配置する。
コンテナ（imui-form-container等）を使用しない場合（枠線を表示したくない場合）の要素配置の調整用ボックスです。マージンとパディングを指定します。
imui-box-layoutを指定している場合
| 見出し | 内容 |
|---|---|
| 見出し | 内容 |
| 見出し | 内容 |
imui-box-layoutを指定していない場合
| 見出し | 内容 |
|---|---|
| 見出し | 内容 |
| 見出し | 内容 |
ツールボックスやオペレーションボックスと同じデザインのボックスです。