mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-16 09:23:52 +03:00
265b83c393
Until V4 the control would always fit its contents. On V5 that behaviour was changed to always fill the container. This means that to limit the element's width one had to limit the value of its container (which might be hard to do when the labels of the tabs are unknown or might change). We now support both settings, and the user has to decide what to do for each use case.
86 lines
1.4 KiB
Elm
86 lines
1.4 KiB
Elm
module Examples.SegmentedControl
|
|
exposing
|
|
( Msg
|
|
, State
|
|
, example
|
|
, init
|
|
, update
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs Msg
|
|
@docs State
|
|
@docs example
|
|
@docs init
|
|
@docs styles
|
|
@docs update
|
|
|
|
-}
|
|
|
|
import Css
|
|
import Html.Styled as Html
|
|
import Html.Styled.Attributes exposing (css)
|
|
import ModuleExample exposing (Category(..), ModuleExample)
|
|
import Nri.Ui.SegmentedControl.V6 exposing (Width(..))
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= Select Id
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
Nri.Ui.SegmentedControl.V6.Config Id Msg
|
|
|
|
|
|
{-| -}
|
|
example : (Msg -> msg) -> State -> ModuleExample msg
|
|
example parentMessage state =
|
|
{ filename = "Nri/Ui/SegmentedControl/V6.elm"
|
|
, category = Behaviors
|
|
, content =
|
|
[ Nri.Ui.SegmentedControl.V6.view state
|
|
|> Html.map parentMessage
|
|
|> Html.toUnstyled
|
|
]
|
|
}
|
|
|
|
|
|
{-| -}
|
|
init : State
|
|
init =
|
|
{ onClick = Select
|
|
, options =
|
|
[ { icon = Nothing
|
|
, id = "a"
|
|
, label = "Option A"
|
|
, value = "a"
|
|
}
|
|
, { icon = Nothing
|
|
, id = "b"
|
|
, label = "Option B"
|
|
, value = "b"
|
|
}
|
|
]
|
|
, selected = "a"
|
|
, width = FitContent
|
|
}
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
case msg of
|
|
Select id ->
|
|
( { state | selected = id }, Cmd.none )
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
type alias Id =
|
|
String
|