NoRedInk/noredink-ui/9.8.0

NOTE: the latest version is 35.9.3

Nri.Ui.SegmentedControl.V8

type alias Config a msg =
{ onClick : a -> msg
, options : List (Option a)
, selected : a
, width : Width
, content : 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
  • content: the panel content for the selected option
type alias Option a =
{ value : a
, icon : Maybe Svg
, label : String
}
type Width
= FitContent
| FillContainer
view : Config a msg -> Html msg
viewSpa : (route -> String) -> Config route msg -> Html msg

Creates a segmented control that supports SPA navigation. You should always use this instead of view when building a SPA and the segmented control options correspond to routes in the SPA.

The first parameter is a function that takes a route and returns the URL of that route.

type alias ToggleConfig a msg =
{ onClick : a -> msg
, options : List (Option a)
, selected : a
, width : Width
}

Same shape as Config but without the content

viewToggle : ToggleConfig a msg -> Html msg

Creates just the toggle when need the ui element itself and not a page control

viewOptionalSelectToggle : ToggleConfigWithOptionalSelection a msg -> Html msg

Creates just the toggle when need the ui element itself and not a page control. Since this element is used for a selection and not for page navigation, it seems reasonable to handle nothing being selected. Additionally, this feels like under the hood it should be radio buttons or something that denotes selection instead of buttons. Again, Katie is mentally noting this clean up for hackday but if your heart sees fit, update if you'd like!

Changes from V7:

  • remove dependence on Nri.Ui.Icon.V5
  • fix icons overlowing the segmented control