Version: v7

ion-toolbar

ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。

ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。

基本的な使い方

ツールバーを正しく配置するために、headerまたはfooterの内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 title コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。

<ion-header>
  <ion-toolbar>
    <ion-title>Header Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer Toolbar</ion-title>
  </ion-toolbar>
</ion-footer>

Buttons in Toolbars

ツールバーに配置するボタンは、buttonsコンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きのスロットを使ってツールバーの内側に配置することができます。スロットの "primary" と "secondary" は ios モードと md モードで異なる動作をします。

buttons コンポーネントは、標準的なボタン、戻るボタン、メニューボタン、またはそれらのいずれかをラップすることができます。ツールバーのボタンはデフォルトで透明ですが、ボタンの fill プロパティで変更することが可能です。この例でバックボタンとメニューボタンに含まれているプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button> Start </ion-button>
  </ion-buttons>
  <ion-title>Start / End Buttons</ion-title>
  <ion-buttons slot="end">
    <ion-button> End </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button> Secondary </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button> Primary </ion-button>
  </ion-buttons>
  <ion-title>Primary / Secondary Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button>
      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Icon Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="person-circle"></ion-icon>
      Contact
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="solid">
      Help
      <ion-icon slot="end" name="help-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Solid Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star"></ion-icon>
      Star
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="outline">
      Edit
      <ion-icon slot="end" name="create"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Outline Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button default-href="#"></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button auto-hide="false"></ion-menu-button>
  </ion-buttons>
  <ion-title>Menu Button</ion-title>
</ion-toolbar>

Searchbars in Toolbars

searchbarは、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>

ツールバーのセグメント

セグメントは、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。

<ion-header>
  <ion-toolbar>
    <ion-segment value="all">
      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="favorites">
        <ion-label>Favorites</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

ツールバーのプログレスバー

プログレスバーは、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
    <ion-progress-bar type="indeterminate"></ion-progress-bar>
  </ion-toolbar>
</ion-header>

テーマ

Colors

<ion-toolbar>
  <ion-title>Default Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
  <ion-title>Primary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
  <ion-title>Secondary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
  <ion-title>Tertiary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
  <ion-title>Success Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
  <ion-title>Warning Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
  <ion-title>Danger Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
  <ion-title>Light Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
  <ion-title>Medium Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
  <ion-title>Dark Toolbar</ion-title>
</ion-toolbar>

CSSカスタムプロパティ

src/app/example.component.html
src/app/example.component.css

<ion-toolbar>
  <ion-title>Custom Toolbar</ion-title>
</ion-toolbar>

ion-toolbar {
  --background: #19422d;
  --color: white;

  --border-color: #f24aec;
  --border-width: 4px 0;
  --border-style: double;

  --min-height: 80px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

Borders

md モードでは、<ion-header> は下部にボックスシャドウを、<ion-footer> は上部にボックスシャドウを表示します。 ios モードでは、<ion-header> の下部にボーダーが、<ion-footer> の上部にボーダーが表示されます。

プロパティ

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--background`	ツールバーの背景
`--border-color`	ツールバーの枠の色
`--border-style`	ツールバーのボーダーのスタイル
`--border-width`	ツールバーの枠の幅
`--color`	ツールバーテキストの色
`--min-height`	ツールバーの最小高さ
`--opacity`	ツールバーの背景の不透明度
`--padding-bottom`	ツールバーのBottom Padding
`--padding-end`	ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
`--padding-start`	ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。
`--padding-top`	ツールバーのTop Padding

Slots

Name	Description
``	slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
`end`	コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。
`primary`	コンテンツは、`ios` modeではツールバーテキストの右側に、`md` modeでは右端に配置されます。
`secondary`	コンテンツは、`ios` modeではツールバーテキストの左側に、`md` modeでは右側に直接配置されます。
`start`	コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。

基本的な使い方​

Buttons in Toolbars​

Searchbars in Toolbars​

ツールバーのセグメント​

ツールバーのプログレスバー​

テーマ​

Colors​

CSSカスタムプロパティ​

Borders​

プロパティ​

color​

mode​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Buttons in Toolbars

Searchbars in Toolbars

ツールバーのセグメント

ツールバーのプログレスバー

テーマ

Colors

CSSカスタムプロパティ

Borders

プロパティ

color

mode

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots