NOTE: the latest version is 35.9.3

README About Versions Source Modules

Nri.Ui.ClickableSvg.V1

Post-release patches

uses ClickableAttributes
adds tooltip helpers

Create a button or link

button : String -> Svg -> List (Attribute msg) -> Html msg

link : String -> Svg -> List (Attribute msg) -> Html msg

type Attribute msg

Behavior

onClick : msg -> Attribute msg

href : String -> Attribute msg

linkSpa : String -> Attribute msg

Use this link for routing within a single page app.

This will make a normal <a> tag, but change the Events.onClick behavior to avoid reloading the page.

See https://github.com/elm-lang/html/issues/110 for details on this implementation.

linkExternal : String -> Attribute msg

linkWithMethod :

{ method : String

, url : String

}

-> Attribute msg

linkWithTracking :

{ track : msg

, url : String

}

-> Attribute msg

linkExternalWithTracking :

{ track : msg

, url : String

}

-> Attribute msg

Sizing

width : Px -> Attribute msg

Default width is 17px.

Note: changing this width will change the width of the icon. The button or link may be wider if you add a border or margin to it.

height : Px -> Attribute msg

Default height is 17px.

Note: changing this height will change the height of the icon. The button or link may be taller if you add a border or margin to it.

State

disabled : Bool -> Attribute msg

Customization

withBorder : Attribute msg

Display a border around the icon.

primary : Attribute msg

white/transparent icon on an azure background.

secondary : Attribute msg

This is the default: a blue icon on a transparent background, or a blue icon on a white/glacier icon with a blue border.

danger : Attribute msg

White/transparent icon on a red background.

dangerSecondary : Attribute msg

Red icon on a white/transparent background.

custom : List (Attribute msg) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying Button styles change. Instead, please use the css helper.

css : List Style -> Attribute msg

Tooltips

withTooltipAbove :

{ id : String

, isOpen : Bool

, onShow : Bool -> msg

}

-> Attribute msg

DEPRECATED: prefer to use the Tooltip module directly.

withTooltipBelow :

{ id : String

, isOpen : Bool

, onShow : Bool -> msg

}

-> Attribute msg

DEPRECATED: prefer to use the Tooltip module directly.

Modules