Material.Fab

A floating action button represents the primary action in an application.

A floating action button only contains an icon to indicate its action. For a floating action button that may contain text, refer to the extended floating action button.

Resources
Basic Usage
Configuration
- Configuration Options
Floating Action Button
Mini FAB
Exited FAB
FAB with Custom Icon
Focus a FAB

Resources

Basic Usage

Developers are required to manually position the floating action button within their page layout, for instance by setting a fixed position via CSS.

import Html.Attributes exposing (style)
import Material.Fab as Fab


type Msg
    = FabClicked


main =
    Fab.fab
        (Fab.config
            |> Fab.setOnClick FabClicked
            |> Fab.setAttributes
                [ style "position" "fixed"
                , style "bottom" "2rem"
                , style "right" "2rem"
                ]
        )
        (Fab.icon "favorite")

Configuration

type Config msg

Floating action button configuration

config : Config msg

Default floating action button configuration

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks the floating action button

setMini : Bool -> Config msg -> Config msg

Specify whether the floating actions button should be smaller than normally

setExited : Bool -> Config msg -> Config msg

Specify whether a floating action button should transition off the screen

setTouch : Bool -> Config msg -> Config msg

Specify whether touch support is enabled (enabled by default)

Touch support is an accessibility guideline that states that touch targets should be at least 48 x 48 pixels in size. Use this configuration option to disable increased touch target size.

Note: FABs with touch support will be wrapped in a HTML div element to prevent potentially overlapping touch targets on adjacent elements.

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Floating Action Button

fab : Config msg -> Icon -> Html msg

Floating action button view function

Mini FAB

If you want the floating action button to appear in smaller size, set its setMini configuration option to True.

Fab.fab (Fab.config |> Fab.setMini True)
    (Fab.icon "favorite")

Exited FAB

If you want the floating action button to transition off the screen, set its setExited configuration option to True.

Fab.fab (Fab.config |> Fab.setExited True)
    (Fab.icon "favorite")

FAB with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.

type Icon

Icon type

icon : String -> Icon

Material Icon

Fab.fab Fab.config (Fab.icon "favorite")

customIcon :

(List (Attribute Never) -> List (Html Never) -> Html Never)

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

Fab.fab Fab.config
    (Fab.customIcon Html.i
        [ class "fab fa-font-awesome" ]
        []
    )

svgIcon : List (Attribute Never) -> List (Svg Never) -> Icon

SVG icon

Fab.fab Fab.config
    (Fab.svgIcon
        [ Svg.Attributes.viewBox "…" ]
        [-- …
        ]
    )

Focus a FAB

You may programatically focus a floating action button by assigning an id attribute to it and use Browser.Dom.focus.

Fab.fab
    (Fab.config
        |> Fab.setAttributes
            [ Html.Attributes.id "my-fab" ]
    )
    (Fab.icon "favorite_border")

Touch Support

Touch support is enabled by default. To disable touch support set a FAB's setTouch configuration option to False.

Fab.fab
    (Fab.config
        |> Fab.setTouch False
    )
    (Fab.icon "favorite_border")

aforemny/material-components-web-elm/5.1.0