aforemny / material-components-web-elm / Material.Fab.Extended

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

An extended floating action button primarily contains text to indicate its action, and optionally contains an icon. If you are looking for a floating action button that primarily contains an icon, and no text, refer to the regular floating action button.

Table of Contents

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.Extended as ExtendedFab

type Msg
    = Clicked

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

Configuration


type Config msg

Extended floating action button configuration

config : Config msg

Default extended floating action button configuration

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks the floating action button

setIcon : Maybe Icon -> Config msg -> Config msg

Specify whether a floating action button displays an icon

setTrailingIcon : Basics.Bool -> Config msg -> Config msg

Specify whether a floating action button's icon is a trailing icon

Trailing icons are displyed after the label rather than before.

setExited : Basics.Bool -> Config msg -> Config msg

Specify whether a floating action button transitions off the screen

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

Specify additional attributes

Extended Floating Action Button

fab : Config msg -> String -> Html msg

Extended floating action button view function

Extended FAB with Icon

To add an icon to an extended floating action button, use its setIcon configuration option and specify the name of a Material Icon. If you want the icon to be positioned after the button's label, also set its setTrailingIcon configuration option to True.

Extended FAB with Leading Icon

ExtendedFab.fab
    (ExtendedFab.config
        |> ExtendedFab.setIcon (Just (ExtendedFab.icon "favorite"))
    )
    "Favorites"

Extended FAB with Trailing Icon

ExtendedFab.fab
    (ExtendedFab.config
        |> ExtendedFab.setIcon (Just (ExtendedFab.icon "favorite"))
        |> ExtendedFab.setTrailingIcon True
    )
    "Favorites"

Exited Extended FAB

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

ExtendedFab.fab
    (ExtendedFab.config |> ExtendedFab.setExited True)
    "Favorites"

Extended 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

ExtendedFab.fab
    (Extended.Fab.config
        |> ExtendedFab.setIcon
            (Just (ExtendedFab.icon "favorite"))
    )
    "Material Icon"

customIcon : (List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Html Basics.Never) -> List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Icon

Custom icon

ExtendedFab.fab
    (ExtendedFab.config
        |> ExtendedFab.setIcon
            (Just
                (Fab.customIcon Html.i
                    [ class "fab fa-font-awesome" ]
                    []
                )
            )
    )
    "Font Awesome"

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

SVG icon

ExtendedFab.fab
    (ExtendedFab.config
        |> ExtendedFab.setIcon
            (Just
                (ExtendedFab.svgIcon
                    [ Svg.Attributes.viewBox "…" ]
                    [-- …
                    ]
                )
            )
    )
    "SVG"

Focus an Extended FAB

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

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