PackagesReroutesAboutlamdera.com

NoRedInk/noredink-ui/22.6.0

NOTE: the latest version is 35.9.3

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/NoRedInk/noredink-ui.

What we checked: Tag 22.6.0 is still on github.com/NoRedInk/noredink-ui; its commit 7cae53f1af4b is from 2023-03-24 17:13 UTC, before the version was published (2023-03-27 14:55 UTC); elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/NoRedInk/noredink-ui/zipball/22.6.0/

READMEAboutVersionsSourceModules

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.paragraph "Hello, world! I'm a balloon!"
    , Balloon.onTop
    , Balloon.navy
    ]

Changelog

Patch changes:

  • adds paragraph

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

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

Provide a list of custom HTML.

Customizations for Balloon

Green theme (This is the default theme.)

Purple theme

Orange theme

White theme

{ backgroundColor : Color
, color : Color
}
-> Attribute msg

Custom theme: set the background & text color.

{ backgroundColor : String
, color : String
}
-> Attribute msg

Typically, you will want to use system colors for these colors (which is why the API uses strings):

Balloon with the arrow on the top.

 ___/\_____
|         |
|_________|

Balloon with the arrow on the right.

  __________
 |         |
 |          >
 |_________|

Balloon with the arrow on the left.

  __________
 |         |
<          |
 |_________|

Balloon with the arrow on the bottom.

 __________
|         |
|___  ____|
    \/

Put the arrow at the "start" of the ballon. For onTop & onBottom ballons, this means "left". For onLeft & onRight ballon, this means "top".

 __________
|_  ______|
  \/

Put the arrow at the "middle" of the ballon. This is the default behavior.

 __________
|___  ____|
    \/

Put the arrow at the "end" of the ballon. For onTop & onBottom ballons, this means "right". For onLeft & onRight ballon, this means "bottom".

 __________
|______  _|
       \/
arrowHeight : Float -> Attribute msg

Set how tall you want the arrow to be. The default is 8px.

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
contentId : 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 ]

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera