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