Nri.Ui.Balloon.V2

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.plaintext "Hello!"
    , Balloon.onTop
    , Balloon.navy
    ]

Changelog

Changes from V1:

allow for far more customization:
- background color
- HTML attributes
change the API to be more similar to other NRI components
- add the standard attributes, like nriDescription and css
- balloon -> view
- content -> markdown, plaintext, and html

API

view : List (Attribute msg) -> Html msg

Green balloon without an arrow by default.

 __________
|         |
|_________|

type Attribute msg

Balloon's attributes.

Content

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 msg) -> Attribute msg

Provide a list of custom HTML.

Customizations for Balloon

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 : Color

, color : 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.

 __________
|         |
|___  ____|
    \/

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 Balloon styles change. Instead, please use the css helper.

id : String -> Attribute msg

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

CSS

containerCss : List Style -> Attribute msg

css : List Style -> Attribute msg

notMobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

NoRedInk/noredink-ui/21.2.0

Nri.Ui.Balloon.V2

Changelog

API

Content

Customizations for Balloon

CSS

Modules