NoRedInk/noredink-ui/11.1.1

NOTE: the latest version is 35.9.3

Nri.Ui.SegmentedControl.V10

Changes from V9:

  • hides non-displayed content rather than fully removing from the DOM, allowing for the content the SegmentedControl controls to have overflowY: auto & maintain scroll position
  • 💀 removes NavConfig and SelectConfig
  • combines view and viewSpa (for V9 view behavior, be sure toUrl is Nothing. for V9 viewSpa behavior, pass through a Just as toUrl)
  • add custom attributes hole to the Option (in order to make SegmentedControls compatible with the Modal component)
  • combine css attributes into one to prevent class-name-order-change css :bug:s
  • :bug: fix overflowing-y svg icon issue
type alias Option value msg =
{ value : value
, label : String
, attributes : List (Attribute msg)
, icon : Maybe Svg
, content : Html msg
}
{ onClick : a -> msg
, options : List (Option a msg)
, selected : a
, width : Width
, toUrl : Maybe (a -> String)
}
-> Html msg
  • onClick : the message to produce when an option is selected (clicked) by the user
  • 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 SelectOption value msg =
{ value : value
, label : String
, attributes : List (Attribute msg)
, icon : Maybe Svg
}
{ onClick : a -> msg
, options : List (SelectOption a msg)
, selected : Maybe a
, width : Width
}
-> Html msg

Creates just the segmented select when you need the ui element itself and not a page control

  • onClick : the message to produce when an option is selected (clicked) by the user
  • options: the list of options available
  • selected: if present, the value of the currently-selected option
  • width: how to size the segmented control
type Width
= FitContent
| FillContainer