画面全体用ツールバー

見出し1(imui-title)の下に配置するツールバーです。

ツールバーの基本構成

ツールバーの基本構成のクラスと役割

No クラス名 役割・配置先 備考
1 .imui-toolbar-wrap 外枠。外側から1番目に配置。
2 .imui-toolbar-inner 内枠。外側から2番目に配置。 No1の中に配置
3 .imui-list-toolbar ツールバー左側 No2の中に配置
4 .imui-toolbar-icon 処理リンクまたは処理アイコン No3,5の中に配置
5 .imui-list-toolbar-utility ツールバー右側 No2の中に配置

処理リンク配置(実装)

見出し1の下にツールバーを配置した状態です。

画面タイトル

  • 設定
  • 文字列1
  • 文字列2

ツールバー内の配置内容

名称 場所 構成 用途
戻る 左側の最左 アイコン+ツールチップ 前のページへ戻る
区切り線 任意 区切り線 区切り線として利用
処理リンク 左側の中 アイコン+文字リンク 設定の処理リンクに利用
タブアイコン 左側の中 アイコン+ツールチップ タブ切替に利用
文字列 左側の中 文字列 文字列表示に利用
最新表示 右側の最右 アイコン+ツールチップ(最新表示) 再表示

ツールバー内の配置内容のHTMLタグとクラス

名称 <li>の class <a>の class <a>の title <span>の class 表示アイコン
戻る .imui-toolbar-icon 戻る im-ui-icon-common-16-back
区切り線 .icon-split
処理リンク .imui-toolbar-icon .im-ui-icon-common-16-settings
区切り線 .icon-split
タブアイコン 以下組み合わせて利用
  • 未選択時用 .imui-toolbar-tab
  • active時用 .imui-list-toolbar-tab-selected
各機能で指定

.im-ui-icon-common-16-star

.im-ui-icon-common-16-search

.im-ui-icon-common-16-question

区切り線 .icon-split
文字列 .imui-toolbar-text-only
liタグ、spanタグどちらかに指定
aタグなし aタグなし .imui-toolbar-text-only
liタグ、spanタグどちらかに指定
最新表示 .imui-toolbar-icon 最新表示 .im-ui-icon-common-16-refresh

その他ツールバー

以下のモジュールにて、ツールバーを付ける事が可能です。

ツールバー内部の要素に、画面全体用ツールバーと同じクラスを使用してください。