Skip to main content
Version: v7

ion-toolbar

shadow

ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./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カスタムプロパティ

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

Borders

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

プロパティ

color

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

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

イベント

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カスタムプロパティ

NameDescription
--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

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