メインコンテンツまでスキップ
Version: v6

ion-buttons

scoped

Contents

Buttonsコンポーネントはコンテナ要素です。toolbarに配置するButtonは、 <ion-buttons> 要素の内部に配置する必要があります。

<ion-buttons> 要素は、値を指定した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.

Usage

<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-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-title>Default Buttons</ion-title>
<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-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 collapse="true">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Collapsible Buttons</ion-title>
</ion-toolbar>

Properties

collapse

DescriptionIf true, buttons will disappear when its
parent toolbar has fully collapsed if the toolbar
is not the first toolbar. If the toolbar is the
first toolbar, the buttons will be hidden and will
only be shown once all toolbars have fully collapsed.

Only applies in ios mode with collapse set to
true on ion-header.

Typically used for Collapsible Large Titles
Attributecollapse
Typeboolean
Defaultfalse