Adding a tooltip? Use Nri.Ui.Tooltip
, not Balloon.
Balloon is really just a container: it is non-interactive and isn't semantically meaningful.
Balloon.view
[ Balloon.paragraph "Hello, world! I'm a balloon!"
, Balloon.onTop
, Balloon.navy
]
Patch changes:
Changes from V1:
balloon
-> view
markdown
, plaintext
, and html
view : List (Attribute msg) -> Html.Styled.Html msg
Green balloon without an arrow by default.
__________
| |
|_________|
Balloon's attributes.
paragraph : String -> Attribute msg
Provide a plain-text string that will be put into a paragraph tag, with the default margin removed.
plaintext : String -> Attribute msg
Provide a plain-text string.
markdown : String -> Attribute msg
Provide a string that will be rendered as markdown.
html : List (Html.Styled.Html msg) -> Attribute msg
Provide a list of custom HTML.
green : Attribute msg
Green theme (This is the default theme.)
purple : Attribute msg
Purple theme
orange : Attribute msg
Orange theme
white : Attribute msg
White theme
navy : Attribute msg
Navy theme
customTheme : { backgroundColor : Css.Color, color : Css.Color } -> Attribute msg
Custom theme: set the background & text color.
highContrastModeTheme : { backgroundColor : String, color : String } -> Attribute msg
Typically, you will want to use system colors for these colors (which is why the API uses strings):
onBottom : Attribute msg
Balloon with the arrow on the top.
___/\_____
| |
|_________|
onLeft : Attribute msg
Balloon with the arrow on the right.
__________
| |
| >
|_________|
onRight : Attribute msg
Balloon with the arrow on the left.
__________
| |
< |
|_________|
onTop : Attribute msg
Balloon with the arrow on the bottom.
__________
| |
|___ ____|
\/
alignArrowStart : Attribute msg
Put the arrow at the "start" of the ballon. For onTop & onBottom ballons, this means "left". For onLeft & onRight ballon, this means "top".
__________
|_ ______|
\/
alignArrowMiddle : Attribute msg
Put the arrow at the "middle" of the ballon. This is the default behavior.
__________
|___ ____|
\/
alignArrowEnd : Attribute msg
Put the arrow at the "end" of the ballon. For onTop & onBottom ballons, this means "right". For onLeft & onRight ballon, this means "bottom".
__________
|______ _|
\/
arrowHeight : Basics.Float -> Attribute msg
Set how tall you want the arrow to be. The default is 8px.
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 Balloon styles change.
Instead, please use the css
helper.
id : String -> Attribute msg
contentId : String -> Attribute msg
nriDescription : String -> Attribute msg
testId : String -> Attribute msg
containerCss : List Css.Style -> 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 ]