mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-16 09:23:52 +03:00
e5a56486d7
We want to allow the control to take up the full width of the parent. This will most likely break something if you try to upgrade directly. Should be fixable by putting the control in an element with the appropriate width.
101 lines
1.6 KiB
Elm
101 lines
1.6 KiB
Elm
module Examples.SegmentedControl
|
|
exposing
|
|
( Msg
|
|
, State
|
|
, example
|
|
, init
|
|
, styles
|
|
, update
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs Msg
|
|
@docs State
|
|
@docs example
|
|
@docs init
|
|
@docs styles
|
|
@docs update
|
|
|
|
-}
|
|
|
|
import Css
|
|
import Css.Foreign
|
|
import Html
|
|
import ModuleExample exposing (Category(..), ModuleExample)
|
|
import Nri.Ui.SegmentedControl.V5
|
|
import Nri.Ui.Styles.V1
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= Select Id
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
Nri.Ui.SegmentedControl.V5.Config Id Msg
|
|
|
|
|
|
{-| -}
|
|
example : (Msg -> msg) -> State -> ModuleExample msg
|
|
example parentMessage state =
|
|
{ filename = "Nri/Ui/SegmentedControl/V5.elm"
|
|
, category = Behaviors
|
|
, content =
|
|
[ Html.map parentMessage
|
|
(styles.div Container [ Nri.Ui.SegmentedControl.V5.view state ])
|
|
]
|
|
}
|
|
|
|
|
|
{-| -}
|
|
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"
|
|
}
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
case msg of
|
|
Select id ->
|
|
( { state | selected = id }, Cmd.none )
|
|
|
|
|
|
{-| -}
|
|
styles : Nri.Ui.Styles.V1.Styles a b c
|
|
styles =
|
|
Nri.Ui.Styles.V1.styles
|
|
"Examples-SegmentedControl-"
|
|
[ Css.Foreign.class Container
|
|
[ Css.width (Css.px 500)
|
|
]
|
|
]
|
|
|
|
|
|
type Classes
|
|
= Container
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
type alias Id =
|
|
String
|