Skip to main content
Version: v7

ion-fab-button

shadow

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

その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンをfabコンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。

使用例については、fab documentationを参照してください。

プロパティ

activated

Descriptiontrueの場合、ファブボタンにクローズアイコンを表示します。
Attributeactivated
Typeboolean
Defaultfalse

closeIcon

Descriptionクローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。
Attributeclose-icon
Typestring
Defaultclose

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザーはファブボタンを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

Descriptionルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

Descriptionルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

show

Descriptiontrueの場合、fabボタンがfab-listにあるときに表示されます。
Attributeshow
Typeboolean
Defaultfalse

size

Descriptionボタンの大きさを指定します。ミニファブボタンを作るには、smallに設定します。
Attributesize
Type"small" | undefined
Defaultundefined

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

translucent

Descriptiontrueの場合、ファブボタンが半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Attributetranslucent
Typeboolean
Defaultfalse

type

Descriptionボタンの種類です。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

イベント

NameDescription
ionBlurボタンのフォーカスが外れたときに発行されます。
ionFocusボタンにフォーカスが当たっているときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
close-iconファブリストを開いたときに表示されるクローズアイコン(ion-iconを使用します)。
nativeすべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。

CSSカスタムプロパティ

NameDescription
--backgroundボタンの背景
--background-activatedボタンが押されたときの背景。注意:これを設定すると、Material Designの波紋に干渉します。
--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クローズアイコンのFont Size
--colorボタンの文字色
--color-activatedボタンが押されたときの文字色
--color-focusedタブキーでフォーカスしたときのボタンの文字色
--color-hoverホバー時のボタンの文字色
--padding-bottomボタンのBottom Padding
--padding-endボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topボタンのTop Padding
--ripple-colorボタンリプルエフェクトの色
--transitionボタンの遷移

Slots

No slots available for this component.