Elm UI List Example - Elm-ui Typing CST Test
Loading…
Elm UI List Example — Elm-ui Code
Displays a dynamic list of items with buttons to add new entries.
module Main exposing (main)
import Browser
import Element exposing (..)
import Element.Events exposing (onClick)
-- MODEL
type alias Model = { items : List String }
initialModel : Model
initialModel = { items = [] }
-- UPDATE
type Msg = AddItem String
update : Msg -> Model -> Model
update msg model =
case msg of AddItem str -> { model | items = model.items ++ [str] }
-- VIEW
view : Model -> Element Msg
view model =
column [ spacing 10, padding 20 ]
( List.map (item -> text item) model.items ++ [ button [ onClick (AddItem "New Item") ] (text "Add Item") ] )
-- MAIN
main = Browser.sandbox { init = initialModel, update = update, view = view }Elm-ui Language Guide
Elm UI is a library for building web interfaces in Elm, focusing on layout and styling in a declarative, type-safe way without relying on CSS.
Primary Use Cases
- ▸Building web interfaces in Elm
- ▸Creating responsive layouts without CSS
- ▸Developing reusable UI components
- ▸Prototyping web app designs quickly
- ▸Type-safe styling and spacing
Notable Features
- ▸Declarative layout syntax
- ▸Completely typed in Elm
- ▸Composable UI boxes
- ▸Supports responsive and flexible layouts
- ▸Eliminates manual CSS for many tasks
Origin & Creator
Elm UI was created by the Elm community, with Evan Czaplicki (creator of Elm) influencing its design for declarative UI patterns.
Industrial Note
Elm UI is used primarily in Elm applications to replace CSS for layout management, providing strong type safety and predictable UI behavior.