NoRedInk/noredink-ui/12.13.0

NOTE: the latest version is 35.9.3

Nri.Ui.SegmentedControl.V11

Changes from V10:

  • change selection using left/right arrow keys
  • only currently-selected or first control is tabbable
  • tabpanel is tabbable
  • Uses TabsInternal under the hood
  • viewSelect renamed to viewRadioGroup, SelectOption renamed to Radio
  • viewRadioGroup uses native HTML radio input internally
type alias Option value msg =
{ value : value
, label : String
, attributes : List (Attribute msg)
, icon : Maybe Svg
, content : Html msg
}
{ onSelect : a -> msg
, onFocus : String -> msg
, toString : a -> String
, options : List (Option a msg)
, selected : a
, width : Width
, toUrl : Maybe (a -> String)
}
-> Html msg
  • onSelect : the message to produce when an option is selected by the user
  • onFocus : the message to focus an element by id string
  • toString : function to get the option value as a string
  • options: the list of options available
  • selected: the value of the currently-selected option
  • width: how to 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
, label : String
, attributes : List (Attribute msg)
, icon : Maybe Svg
}
{ onSelect : a -> msg
, toString : a -> String
, options : List (Radio a msg)
, selected : Maybe a
, width : Width
, 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
  • toString: 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
  • width: how to size the segmented control
  • legend:
type Width
= FitContent
| FillContainer