8.2. フローティングアクションボタンのパラメーター

slot

フローティングアクションボタンの位置。有効な値: PAGE_END、BOTTOM_LEFT

enum

PAGE_END

なし

label

フローティングアクションボタンの名前

String

該当なし

はい

icon

フローティングアクションボタンのアイコン。Material Design library の塗りつぶされたアイコンを使用することを推奨します。svg アイコンを使用することもできます。例: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>

String、React.ReactElement、SVG image icon、HTML image icon

該当なし

なし

showLabel

アイコンの横にラベルを表示します。

Boolean

該当なし

なし

size

フローティングアクションボタンのサイズ

small、medium、large

medium

なし

color

コンポーネントの色。Palette Getting started guide から追加されたデフォルトのテーマカラーとカスタムテーマカラーの両方をサポートしています。

default、error、info、inherit、primary、secondary、success、warning

default

なし

onClick

フローティングアクションボタンを選択したときに実行されるアクション

React.MouseEventHandler

該当なし

なし

to

フローティングアクションボタンを選択したときに開くリンク

String

該当なし

なし

toolTip

フローティングアクションボタンの上にマウスを移動したときに表示されるテキスト

String

該当なし

なし

priority

サブメニューに表示されるフローティングアクションボタンの順序。値が大きいほど優先度が高くなります。

number

該当なし

なし

visibleOnPaths

指定したパスのフローティングアクションボタンを表示します。

string[]

すべてのパスのフローティングアクションボタンを表示します。

なし

excludeOnPaths

指定したパスのフローティングアクションボタンを非表示にします。

string[]

すべてのパスのフローティングアクションボタンを表示します。

なし