ion-toolbar

シャドウ

ツールバーは通常、コンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。 コンテンツ内に配置すると、ツールバーはコンテンツと一緒にスクロールします。

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

基本的な使い方

適切な配置のために、ツールバーをヘッダーまたはフッター内に配置することをお勧めします。ヘッダーにツールバーを配置すると、コンテンツの上部に固定表示されます。フッターに配置すると、下部に固定表示されます。フルスクリーンのコンテンツは、ヘッダーまたはフッターのツールバーの背後にスクロールします。 タイトルコンポーネントを使用して、ツールバー内にテキストを表示できます。

ツールバーのボタン

ツールバーに配置されたボタンは、buttonsコンポーネント内に配置する必要があります。ボタンコンポーネントは、名前付きスロットを使用してツールバー内に配置できます。 "primary" および "secondary" スロットは、ios および md モードで異なる動作をします。

ボタンコンポーネントは、標準のボタン、戻るボタン、メニューボタン、またはそれらの複数をラップできます。ツールバーのボタンはデフォルトでクリアになるようにスタイル設定されていますが、これはボタンのfillプロパティを使用して変更できます。この例の戻るボタンとメニューボタンに含まれているプロパティは表示用です。適切な使用法については、それぞれのドキュメントを参照してください。

ツールバーの検索バー

検索バーは、コンテンツを検索するためにツールバー内に配置できます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さ全体を使用します。

ツールバーのセグメント

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

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

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

テーマ

色

CSSカスタムプロパティ

境界線

mdモードでは、<ion-header>は下部にボックスシャドウを受け取り、<ion-footer>は上部にボックスシャドウを受け取ります。 iosモードでは、<ion-header>は下部に境界線を受け取り、<ion-footer>は上部に境界線を受け取ります。

プロパティ

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、および "dark" です。色の詳細については、テーマを参照してください。
属性	color
型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
デフォルト	undefined

mode

説明	modeは、使用するプラットフォームスタイルを決定します。
属性	モード
型	"ios" ｜ "md"
デフォルト	undefined

イベント

このコンポーネントで利用可能なイベントはありません。

メソッド

このコンポーネントで利用可能なパブリックメソッドはありません。

CSSシャドウパーツ

このコンポーネントで利用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ

iOS

名前	説明
--background	ツールバーの背景
--border-color	ツールバーの境界線の色
--border-style	ツールバーの境界線のスタイル
--border-width	ツールバーの境界線の幅
--color	ツールバーテキストの色
--min-height	ツールバーの最小高さ
--opacity	ツールバーの背景の不透明度
--padding-bottom	ツールバーの下のパディング
--padding-end	方向が左から右の場合の右パディング、および方向が右から左の場合のツールバーの左パディング
--padding-start	方向が左から右の場合の左パディング、および方向が右から左の場合のツールバーの右パディング
--padding-top	ツールバーの上のパディング

MD

名前	説明
--background	ツールバーの背景
--border-color	ツールバーの境界線の色
--border-style	ツールバーの境界線のスタイル
--border-width	ツールバーの境界線の幅
--color	ツールバーテキストの色
--min-height	ツールバーの最小高さ
--opacity	ツールバーの背景の不透明度
--padding-bottom	ツールバーの下のパディング
--padding-end	方向が左から右の場合の右パディング、および方向が右から左の場合のツールバーの左パディング
--padding-start	方向が左から右の場合の左パディング、および方向が右から左の場合のツールバーの右パディング
--padding-top	ツールバーの上のパディング

スロット

名前	説明
``	コンテンツは、スロットが指定されていない場合は、名前付きスロットの間に配置されます。
end	コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。
primary	コンテンツは、iosモードではツールバーテキストの右側に、mdモードでは一番右側に配置されます。
セカンダリ	コンテンツは、iosモードではツールバーテキストの左側に、mdモードでは右側に直接配置されます。
開始	コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。