ion-fab-button

影

フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形をしています。押すと、関連するさらに多くのアクションが開かれる場合があります。

名前が示すように、FABは通常、固定位置でコンテンツの上に浮かんでいます。fabコンポーネントでfabボタンをラップすることで実現されます。ボタンがfabでラップされていない場合、コンテンツと共にスクロールします。

使用例については、fabドキュメントを参照してください。

プロパティ

activated

説明	trueの場合、fabボタンは閉じるアイコンを表示します。
属性	activated
型	boolean
デフォルト	false

closeIcon

説明	閉じるアイコンに使用するアイコン名。fabボタンを押したときに表示されます。fabリストを含むfab内のメインボタンである場合にのみ適用されます。
属性	close-icon
型	string
デフォルト	close

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトのオプションは："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。
属性	color
型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
デフォルト	undefined

disabled

説明	trueの場合、ユーザーはfabボタンを操作できません。
属性	disabled
型	boolean
デフォルト	false

download

説明	この属性は、ブラウザにURLに移動する代わりにダウンロードするように指示するため、ユーザーはそれをローカルファイルとして保存するように求められます。属性に値がある場合、保存プロンプトで事前に入力されたファイル名として使用されます（ユーザーは必要に応じてファイル名を変更できます）。
属性	download
型	string ｜ undefined
デフォルト	undefined

href

説明	ハイパーリンクが指すURLまたはURLフラグメントを含みます。このプロパティが設定されている場合、アンカータグがレンダリングされます。
属性	href
型	string ｜ undefined
デフォルト	undefined

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	mode
型	"ios" ｜ "md"
デフォルト	undefined

rel

説明	ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、リンクの種類のスペースで区切られたリストです。
属性	rel
型	string ｜ undefined
デフォルト	undefined

routerAnimation

説明	ルーターを使用する場合、hrefを使用して別のページに移動するときの遷移アニメーションを指定します。
属性	undefined
型	((baseEl: any, opts?: any) => Animation) ｜ undefined
デフォルト	undefined

routerDirection

説明	ルーターを使用する場合、hrefを使用して別のページに移動するときの遷移方向を指定します。
属性	router-direction
型	"back" ｜ "forward" ｜ "root"
デフォルト	'forward'

show

説明	trueの場合、fabリストにある場合、fabボタンが表示されます。
属性	show
型	boolean
デフォルト	false

size

説明	ボタンのサイズ。ミニfabボタンにするには、これをsmallに設定します。
属性	size
型	"small" ｜ undefined
デフォルト	undefined

target

説明	リンクされたURLを表示する場所を指定します。hrefが提供されている場合にのみ適用されます。特別なキーワード："_blank"、"_self"、"_parent"、"_top"。
属性	target
型	string ｜ undefined
デフォルト	undefined

translucent

説明	trueの場合、fabボタンは半透明になります。モードが"ios"であり、デバイスがbackdrop-filterをサポートする場合にのみ適用されます。
属性	translucent
型	boolean
デフォルト	false

type

説明	ボタンの種類。
属性	type
型	"button" ｜ "reset" ｜ "submit"
デフォルト	'button'

イベント

名前	説明	バブル
ionBlur	ボタンがフォーカスを失ったときに発生します。	true
ionFocus	ボタンにフォーカスがあるときに発生します。	true

メソッド

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

CSSシャドウパーツ

名前	説明
close-icon	fabリストが開いたときに表示される閉じるアイコン（ion-iconを使用）。
ネイティブ	すべての子要素をラップするネイティブHTMLボタンまたはアンカー要素。

CSSカスタムプロパティ

iOS

名前	説明
--background	ボタンの背景
--background-activated	押したときのボタンの背景。注：これを設定すると、マテリアルデザインのリプルが干渉します。
--background-activated-opacity	押したときのボタン背景の不透明度
--background-focused	タブキーでフォーカスされたときのボタンの背景
--background-focused-opacity	タブキーでフォーカスされたときのボタン背景の不透明度
--background-hover	ホバー時のボタンの背景
--background-hover-opacity	ホバー時のボタン背景の不透明度
--border-color	ボタンの枠線の色
--border-radius	ボタンの角丸
--border-style	ボタンの枠線のスタイル
--border-width	ボタンの枠線の幅
--box-shadow	ボタンのボックスシャドウ
--close-icon-font-size	閉じるアイコンのフォントサイズ
--color	ボタンのテキストカラー
--color-activated	ボタンを押した時のテキストカラー
--color-focused	タブキーでフォーカスされた時のボタンのテキストカラー
--color-hover	ボタンにホバーした時のテキストカラー
--padding-bottom	ボタンの下のパディング
--padding-end	方向が左から右の場合右パディング、右から左の場合左パディング（ボタン）
--padding-start	方向が左から右の場合左パディング、右から左の場合右パディング（ボタン）
--padding-top	ボタンの上のパディング
--ripple-color	ボタンのリップル効果の色
--transition	ボタンのトランジション

MD

名前	説明
--background	ボタンの背景
--background-activated	押したときのボタンの背景。注：これを設定すると、マテリアルデザインのリプルが干渉します。
--background-activated-opacity	押したときのボタン背景の不透明度
--background-focused	タブキーでフォーカスされたときのボタンの背景
--background-focused-opacity	タブキーでフォーカスされたときのボタン背景の不透明度
--background-hover	ホバー時のボタンの背景
--background-hover-opacity	ホバー時のボタン背景の不透明度
--border-color	ボタンの枠線の色
--border-radius	ボタンの角丸
--border-style	ボタンの枠線のスタイル
--border-width	ボタンの枠線の幅
--box-shadow	ボタンのボックスシャドウ
--close-icon-font-size	閉じるアイコンのフォントサイズ
--color	ボタンのテキストカラー
--color-activated	ボタンを押した時のテキストカラー
--color-focused	タブキーでフォーカスされた時のボタンのテキストカラー
--color-hover	ボタンにホバーした時のテキストカラー
--padding-bottom	ボタンの下のパディング
--padding-end	方向が左から右の場合右パディング、右から左の場合左パディング（ボタン）
--padding-start	方向が左から右の場合左パディング、右から左の場合右パディング（ボタン）
--padding-top	ボタンの上のパディング
--ripple-color	ボタンのリップル効果の色
--transition	ボタンのトランジション

スロット

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