NoRedInk/noredink-ui/14.3.0

NOTE: the latest version is 35.9.3

Nri.Ui.SegmentedControl.V14

Changes from V13:

  • Adds tooltip support to viewRadioGroup
type alias Option value msg =
{ value : value
, idString : String
, label : Html msg
, attributes : List (Attribute msg)
, tabTooltip : List (Attribute msg)
, icon : Maybe Svg
, content : Html msg
}

Tooltip defaults: [Tooltip.smallPadding, Tooltip.onBottom, Tooltip.fitToContent]

{ focusAndSelect :
{ select : a
, focus : Maybe String
}
-> msg
, options : List (Option a msg)
, selected : a
, positioning : Positioning
, toUrl : Maybe (a -> String)
}
-> Html msg
  • focusAndSelect : the message to produce when an option is selected by the user
  • options: the list of options available
  • selected: the value of the currently-selected option
  • positioning: how to position and size the segmented control
  • toUrl: a optional function that takes a route and returns the URL of that route. You should always use pass a toUrl function when the segmented control options correspond to routes in your SPA.
type alias Radio value msg =
{ value : value
, idString : String
, label : Html msg
, attributes : List (Attribute msg)
, tooltip : List (Attribute msg)
, icon : Maybe Svg
}
{ onSelect : a -> msg
, options : List (Radio a msg)
, selected : Maybe a
, positioning : Positioning
, legend : String
}
-> Html msg

Creates a set of radio buttons styled to look like a segmented control.

  • onSelect: the message to produce when an option is selected (clicked) by the user
  • idString: function to get the radio value as a string
  • options: the list of options available
  • selected: if present, the value of the currently-selected option
  • positioning: how to position and size the segmented control
  • legend:
= Left Width
| Center
type Width
= FitContent
| FillContainer