ion-buttons
Buttonsコンポーネントはコンテナ要素です。ツールバー内で使用する必要があり、標準ボタン、メニューボタン、戻るボタンなど、さまざまな種類のボタンを含めることができます。
基本的な使用方法
ボタンの配置
ボタンは、名前付きスロットを使用してツールバー内に配置できます。以下の表に、各スロットの説明を示します。
スロット | 説明 |
---|---|
start | LTRではコンテンツの左 に、RTLでは右 に配置します。 |
end | LTRではコンテンツの右 に、RTLでは左 に配置します。 |
secondary | ios モードではコンテンツの左 に、md モードでは直接右 に要素を配置します。 |
primary | ios モードではコンテンツの右 に、md モードでは一番右 に要素を配置します。 |
ボタンの種類
ツールバー内のボタンは、デフォルトでクリアスタイルになっていますが、ボタンのfill
プロパティを使用して変更できます。この例では戻るボタンとメニューボタンに含まれるプロパティは表示目的です。適切な使用方法については、それぞれのドキュメントを参照してください。
折りたたみ可能なボタン
ヘッダーが折りたたまれるとボタンを折りたたむには、ボタンにcollapse
プロパティを設定します。これは通常、折りたたみ可能な大きなタイトルで使用されます。
情報
この機能はiOSでのみ使用可能です。
プロパティ
collapse
説明 | trueの場合、親ツールバーが完全に折りたたまれたときにボタンは消えます(ツールバーが最初のツールバーでない場合)。ツールバーが最初のツールバーの場合は、ボタンは非表示になり、すべてのツールバーが完全に折りたたまれた場合にのみ表示されます。ion-header でcollapse をtrue に設定したios モードでのみ適用されます。通常、折りたたみ可能な大きなタイトルに使用されます |
属性 | collapse |
型 | boolean |
デフォルト | false |
イベント
このコンポーネントで使用できるイベントはありません。
メソッド
このコンポーネントで使用できる公開メソッドはありません。
CSSシャドウパーツ
このコンポーネントで使用できるCSSシャドウパーツはありません。
CSSカスタムプロパティ
このコンポーネントで使用できるCSSカスタムプロパティはありません。
スロット
このコンポーネントで使用できるスロットはありません。