for more information visit the package's GitHub page
Package contains the following modules:
A simple material design selectbox
elm install lionar/select
The styles are provided separate: styles
module Main exposing (..)
import Browser
import Html exposing (..)
import Mdc.Select as Select
type Code
= EXW
| FCA
| FAS
| FOB
| CFR
| CIF
| CPT
| CIP
| DAF
| DES
| DEQ
| DDU
| DDP
list : List Code
list =
[ EXW
, FCA
, FAS
, FOB
, CFR
, CIF
, CPT
, CIP
, DAF
, DES
, DEQ
, DDU
, DDP
]
toString : Code -> String
toString inco =
case inco of
EXW -> "EXW"
FCA -> "FCA"
FAS -> "FAS"
FOB -> "FOB"
CFR -> "CFR"
CIF -> "CIF"
CPT -> "CPT"
CIP -> "CIP"
DAF -> "DAF"
DES -> "DES"
DEQ -> "DEQ"
DDU -> "DDU"
DDP -> "DDP"
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}
type alias Model =
{ inco : Code
, selecting : Bool
}
init : Model
init =
{ inco = FCA
, selecting = False
}
type Msg
= OnClose
| OnSelect Code
| OnToggle
update : Msg -> Model -> Model
update msg model =
case msg of
OnClose ->
{ model | selecting = False }
OnSelect inco ->
{ model | inco = inco, selecting = False }
OnToggle ->
{ model | selecting = not model.selecting }
view : Model -> Html Msg
view { inco, selecting } =
Select.view
{ items = list
, opened = selecting
, selected = inco
}
{ close = OnClose
, select = OnSelect
, toggle = OnToggle
}
toString
running a local dev server with elm live:
cd demo
elm-live src/Main.elm -- --output=main.js --debug