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.

Resources
Basic Usage
Configuration
- Configuration Options
Extended Floating Action Button
Extended FAB with Icon
- Extended FAB with Leading Icon
- Extended FAB with Trailing Icon
Exited Extended 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.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 String -> Config msg -> Config msg

Specify whether a floating action button displays an icon

setTrailingIcon : 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 : Bool -> Config msg -> Config msg

Specify whether a floating action button transitions off the screen

setAttributes : List (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 "favorite")
    )
    "Favorites"

Extended FAB with Trailing Icon

ExtendedFab.fab
    (ExtendedFab.config
        |> ExtendedFab.setIcon (Just "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"

aforemny/material-components-web-elm/3.0.1