ツールバー

ツールバーは、テキスト、リンク、ボタン、アイコンボタンなどの要素を含むことができる、水平に並べられたコンポーネントの集合です。

使用方法

ツールバーコンポーネントは純粋な CSS で記述されており、HTML を書くだけで有効になります。

色彩

デフォルトでは背景は透明です。クラス .mdui-color-[color] を追加することで背景色を設定できます。

スタイル

基本スタイル

ツールバーには以下のものを配置できます：

テキスト：<span>Title</span>
リンク：<a href="#">Link</a>
ボタン：<a href="#" class="mdui-btn">button</a>
アイコンボタン：<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
アイコン：<i class="mdui-icon material-icons">menu</i>

<div class="mdui-toolbar-spacer"></div> を追加すると、その要素の両側のコンテンツが両端に押し出されます。

例

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

背景色

例

<div class="mdui-toolbar mdui-color-theme">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

CSS クラス一覧

クラス名	説明
`.mdui-toolbar`	ツールバーを定義します。
`.mdui-toolbar-spacer`	この要素の両側の要素が両端に押し出されます。

タブ

アプリバー

ツールバー

使用方法

色彩

関連情報

スタイル

基本スタイル

背景色

CSS クラス一覧