ion-toolbar

shadow

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

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

基本的な使い方

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

Buttons in Toolbars

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

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

Searchbars in Toolbars

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

ツールバーのセグメント

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

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

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

テーマ

Colors

CSSカスタムプロパティ

Borders

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

プロパティ

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see 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

Name	Description
background	The background of the toolbar, covering the entire area behind the toolbar content.
container	The container that wraps all toolbar content, including the default slot and named slot content.
content	The container for the default slot, wrapping content provided without a named slot.

CSSカスタムプロパティ

iOS

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

MD

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では右側に配置されます。