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	The mode determines which platform styles to use.
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	Background of the toolbar
--border-color	Color of the toolbar border
--border-style	Style of the toolbar border
--border-width	Width of the toolbar border
--color	Color of the toolbar text
--min-height	Minimum height of the toolbar
--opacity	Opacity of the toolbar background
--padding-bottom	Bottom padding of the toolbar
--padding-end	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-start	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-top	Top padding of the toolbar

MD

Name	Description
--background	Background of the toolbar
--border-color	Color of the toolbar border
--border-style	Style of the toolbar border
--border-width	Width of the toolbar border
--color	Color of the toolbar text
--min-height	Minimum height of the toolbar
--opacity	Opacity of the toolbar background
--padding-bottom	Bottom padding of the toolbar
--padding-end	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-start	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-top	Top padding of the toolbar

Slots

Name	Description
``	Content is placed between the named slots if provided without a slot.
end	Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
primary	Content is placed to the right of the toolbar text in ios mode, and to the far right in md mode.
secondary	Content is placed to the left of the toolbar text in ios mode, and directly to the right in md mode.
start	Content is placed to the left of the toolbar text in LTR, and to the right in RTL.