Ui.Indicator

Interactive Element: Indicator

Indicators are stylized, interactive elements indended to highlight information or notify the user of something. Bulma CSS provides default styling and color and size modifiers for three types of indicators: tags, notifications, and progress bars. A delete button may be added to a tag or notification in order to allow the user to remove or dismiss it.

tag : String -> Element msg

Construct an tag label

"My Tag"
  |> Ui.Indicator.tag
  |> Ui.render


--> <span class="tag" role="note">My Tag</span>

HTML tag: <span>
ARIA role: note
Element class: .tag
Available modifiers: color, size, style, grouping
Bulma CSS reference: http://bulma.io/documentation/elements/tag/

notification : String -> Element msg

Construct a notification block

"You are awesome."
  |> Ui.Indicator.notification
  |> Ui.render


--> <div class="notification" role="alert">You are awesome.</div>

HTML tag: <div>
ARIA role: alert
Element class: .notification
Available modifiers: color
Bulma CSS reference: http://bulma.io/documentation/elements/notification/

progress : Int -> Element msg

Construct a progress bar

15
  |> Ui.Indicator.progress
  |> Ui.render


--> <progress class="progress" value="15" max="100">15%</progress>

HTML tag: <progress>
ARIA role: progressbar (default)
Element class: .progress
Available modifiers: color, size
Bulma CSS reference: http://bulma.io/documentation/elements/progress/

Adding Interaction

withDelete : msg -> Element msg -> Element msg

Add a delete button to a tag or notification

"You are awesome."
  |> Ui.Indicator.notification
  |> Ui.Indicatior.withDelete HideNotification
  |> Ui.render


--> <div class="notification" role="alert">
--    <button class="delete" aria-label="Hide notification"></button>
--    You are awesome.
--  </div>

HTML tag: <button>
ARIA role: button (default)
ARIA attribute: aria-label: Assigned a label corresponding to the element class of the parent ("Remove tag", "Dismiss notification", or "Delete" as a default)
Element class: .delete
Available modifiers: none available when using this constructor
Bulma CSS reference: http://bulma.io/documentation/elements/delete/#combinations

danielnarey/elm-modular-ui/1.1.0

Ui.Indicator

Interactive Element: Indicator

Adding Interaction

Modules