ion-buttons

ion-buttonとの違いとは？！
今回も公式の「利用方法」Angularで確認しました。

※引用欄のコードを実装するときは下記のコードも入力してください
始めに<ion-toolbar>
中に引用欄のコード
最後に</ion-toolbar>

Back Button（戻る）

<ion-toolbar>
   <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
   </ion-buttons>
   <ion-title>戻る</ion-title>
</ion-toolbar>

Default Buttons（初期設定）

<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>初期設定</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>

使用例　※ionic公式引用
上のコードでは「︙」の部分に色設定<ion-button color="secondary">
が加えられていますが、
下記は<ion-button>にし、色の設定を行っていません

青
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>

オレンジ
<ion-title>Docs</ion-title>

緑
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>

Right side menu toggle（右のメニューに切り替え）

<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>右のメニューに切り替え</ion-title>
   <ion-buttons slot="end">
       <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
</ion-toolbar>

使用例
上記コードでは<ion-buttons slot="end">の為、
右に三本線が表示されていますが、
これを「slot="start"」にすると左に表示され、使用例のようになります

オレンジ
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>

Collapsible Buttons（折りたたみボタン）

<ion-toolbar>
   <ion-buttons collapse="true">
       <ion-button>
           <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
   </ion-buttons>
   <ion-title>折りたたみボタン</ion-title>
</ion-toolbar>
</ion-content>

使用例
★を押すと、文章などが表示されるのですが、
使用例が見つからなかったので、後日。