Notes for V4:
css
helpernriDescription
, testId
, and id
helpersmodal
helper, for use in modal footers, same as applying large and Css.marginTop (Css.px 15)notMobileCss
, mobileCss
, quizEngineMobileCss
hideIconForMobile
and hideIconAt
hideTextForMobile
and hideTextAt
submit
and opensModal
disabled
caption
size that matches up with Text.caption's font sizedisabled
attribute with aria-disabled="true"
type="button"
ClickableText looks different from Nri.Ui.Button in that it displays without margin or padding. ClickableText has the suave, traditional look of a "link"!
For accessibility purposes, buttons that perform an action on the current page should be HTML <button>
elements and are created here with *Button
functions. Buttons that take the user to a new page should be
HTML <a>
elements and are created here with *Link
functions.
<button>
creatorsbutton : String -> List (Attribute msg) -> Html.Styled.Html msg
Creates a <button>
element
<a>
creatorslink : String -> List (Attribute msg) -> Html.Styled.Html msg
Creates a <a>
element
caption : Attribute msg
This size setting corresponds to Text.caption's font size.
small : Attribute msg
medium : Attribute msg
large : Attribute msg
modal : Attribute msg
For use in Modal footers (adds large
and Css.marginTop (Css.px 15)
)
appearsInline : Attribute msg
Specifies whether it should have inline appearance.
onClick : msg -> Attribute msg
submit : Attribute msg
By default, buttons have type "button". Use this attribute to change the button type to "submit".
Note: this attribute is not supported by links.
opensModal : Attribute msg
Use this attribute when interacting with the button will launch a modal.
href : String -> Attribute msg
linkSpa : String -> Attribute msg
Use this link for routing within a single page app.
This will make a normal 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
disabled : Basics.Bool -> Attribute msg
Shows inactive styling.
If a button, this attribute will disable it as you'd expect.
If a link, this attribute will follow the pattern laid out in Scott O'Hara's disabled links article, and essentially make the anchor a disabled placeholder.
Caveat!
The Component Catalog example will NOT work correctly because of https://github.com/elm/browser/issues/34, which describes a problem where "a tags without href generate a navigation event".
In most cases, if you're not using Browser.application, disabled links should work just fine.
icon : Nri.Ui.Svg.V1.Svg -> Attribute msg
rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg
hideIconForMobile : Attribute msg
Hide the left-side icon for the mobile breakpoint.
hideIconFor : Css.Media.MediaQuery -> Attribute msg
Hide the left-side icon for an arbitrary media query.
custom : List (Html.Styled.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.
nriDescription : String -> Attribute msg
testId : String -> Attribute msg
id : String -> Attribute msg
hideTextForMobile : Attribute msg
hideTextFor : Css.Media.MediaQuery -> Attribute msg
css : List Css.Style -> Attribute msg
notMobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
mobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
quizEngineMobileCss : List Css.Style -> Attribute msg
Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
rightIconCss : List Css.Style -> Attribute msg
Specifies custom styles for the rightIcon