Skip to main content
Version: v6

ion-toolbar

shadow

コンテンツ

Toolbarはコンテンツの上または下に配置されます。Toolbarを<ion-header>に配置すると、Toolbarはコンテンツの一番上に固定されて表示され、<ion-footer>に配置すると、Toolbarは一番下に固定されて表示されます。全画面表示のコンテンツは、ヘッダーまたはフッターのToolbarの後ろにスクロールされます。<ion-content>内に配置すると、Toolbarはコンテンツとともにスクロールします。

Buttons

Toolbarに配置するボタンは<ion-buttons>要素の中に配置しなければなりません。<ion-buttons>要素はnamed slotを使ってToolbarの内側に置くことができます。次の表に、各slotの説明を示します。

SlotDescription
secondaryPositions element to the left of the content in ios mode, and directly to the right in md mode.
primaryPositions element to the right of the content in ios mode, and to the far right in md mode.
startPositions to the left of the content in LTR, and to the right in RTL.
endPositions to the right of the content in LTR, and to the left in RTL.

Borders

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

使い方

<ion-toolbar>
<ion-title>Title Only</ion-title>
</ion-toolbar>

<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
<ion-title size="small">Small Title above a Default Title</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Default Title</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 color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default 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-title>Solid Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</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-title>Outline Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>

<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
Account
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>

</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>

<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>

</ion-buttons>
</ion-toolbar>

<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedSearch()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Search Favorites"></ion-searchbar>
</ion-toolbar>

<ion-toolbar>
<ion-segment value="all">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
</ion-toolbar>

<ion-toolbar color="secondary">
<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 color="primary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary Toolbar</ion-title>
</ion-toolbar>

<ion-toolbar color="dark">
<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 color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark Toolbar</ion-title>
</ion-toolbar>

プロパティ

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
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
--backgroundBackground of the toolbar
--border-colorColor of the toolbar border
--border-styleStyle of the toolbar border
--border-widthWidth of the toolbar border
--colorColor of the toolbar text
--min-heightMinimum height of the toolbar
--opacityOpacity of the toolbar background
--padding-bottomBottom padding of the toolbar
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-topTop padding of the toolbar

Slots

NameDescription
``Content is placed between the named slots if provided without a slot.
endContent is placed to the right of the toolbar text in LTR, and to the left in RTL.
primaryContent is placed to the right of the toolbar text in ios mode, and to the far right in md mode.
secondaryContent is placed to the left of the toolbar text in ios mode, and directly to the right in md mode.
startContent is placed to the left of the toolbar text in LTR, and to the right in RTL.
View Source