本文へ移動
バージョン: v8

ion-buttons

スコープ済み

Buttonsコンポーネントはコンテナ要素です。ツールバー内で使用する必要があり、標準ボタンメニューボタン戻るボタンなど、さまざまな種類のボタンを含めることができます。

基本的な使用方法

ボタンの配置

ボタンは、名前付きスロットを使用してツールバー内に配置できます。以下の表に、各スロットの説明を示します。

スロット説明
startLTRではコンテンツのに、RTLではに配置します。
endLTRではコンテンツのに、RTLではに配置します。
secondaryiosモードではコンテンツのに、mdモードでは直接に要素を配置します。
primaryiosモードではコンテンツのに、mdモードでは一番右に要素を配置します。

ボタンの種類

ツールバー内のボタンは、デフォルトでクリアスタイルになっていますが、ボタンのfillプロパティを使用して変更できます。この例では戻るボタンメニューボタンに含まれるプロパティは表示目的です。適切な使用方法については、それぞれのドキュメントを参照してください。

折りたたみ可能なボタン

ヘッダーが折りたたまれるとボタンを折りたたむには、ボタンにcollapseプロパティを設定します。これは通常、折りたたみ可能な大きなタイトルで使用されます。

情報

この機能はiOSでのみ使用可能です。

プロパティ

collapse

説明trueの場合、親ツールバーが完全に折りたたまれたときにボタンは消えます(ツールバーが最初のツールバーでない場合)。ツールバーが最初のツールバーの場合は、ボタンは非表示になり、すべてのツールバーが完全に折りたたまれた場合にのみ表示されます。

ion-headercollapsetrueに設定したiosモードでのみ適用されます。

通常、折りたたみ可能な大きなタイトルに使用されます
属性collapse
boolean
デフォルトfalse

イベント

このコンポーネントで使用できるイベントはありません。

メソッド

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。