NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-30 06:07:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adds example of a more customized svg

Browse Source
This commit is contained in:
Tessa Kelly 2020-03-09 11:05:28 -07:00
parent 42bf9811d8
commit 41c6d1e909
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Nri/Ui/ClickableSvg/V1.elm
View File

@ -3,6 +3,7 @@ module Nri.Ui.ClickableSvg.V1 exposing
, Attribute
, onClick
, href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
, width, height
, custom, css
)

27
styleguide-app/Examples/ClickableSvg.elm
View File

@ -45,7 +45,7 @@ example unnamedMessages state =
[ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.button "Back"
UiIcon.arrowLeft
[ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the button!") ]
[ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ]
, viewCode
"ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
]
@ -54,6 +54,31 @@ example unnamedMessages state =
, viewCode
"ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]"
]
, Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.button "Go to tutorial"
UiIcon.footsteps
[ ClickableSvg.width (Css.px 80)
, ClickableSvg.height (Css.px 80)
, ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!")
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
, ClickableSvg.css
[ Css.border3 (Css.px 3) Css.dashed Colors.purple
]
]
, viewCode
"""
ClickableSvg.button "Go to tutorial"
UiIcon.footsteps
[ ClickableSvg.width (Css.px 80)
, ClickableSvg.height (Css.px 80)
, ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!")
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
, ClickableSvg.css
[ Css.border3 (Css.px 3) Css.dashed Colors.purple
]
]
"""
]
]
}