elm-ui example for beginners

Colors.elm

module Colors exposing (..)


import Html exposing (Html)
import Element exposing (..)


white =
    Element.rgb 1 1 1


grey =
    Element.rgb 0.9 0.9 0.9


blue =
    Element.rgb 0 0 0.8


red =
    Element.rgb 0.8 0 0


darkBlue =
    Element.rgb 0 0 0.9

Main.elm

module Main exposing (..)


import Html exposing (Html)
import Element exposing (..)
import Element.Font as Font
import Element.Input as Input
import Element.Background as Background
import Element.Border as Border
import Colors exposing(..)
import Typelist exposing(..)







main :Html Msg
main = 
 Element.layout[Element.width Element.fill ,Element.height Element.fill,centerX,centerY ]  <|
    viewBox Search Click


viewBox : (String -> msg) ->  msg ->  Element msg
viewBox onSearch onClick  =
        Element.column [  ]
            [ el
                [ 
                 centerX
                , Font.size 36
                ]
                (text "Post Finder")
            ,  Input.username
                [ spacing 1
                ,centerX,centerY
                ]
                {text = ""
               , placeholder = Just (Input.placeholder [] (text ""))
               , onChange = onSearch
               , label = Input.labelAbove [ Font.size 14   ] (text "postid")
                }
            
            , Input.button
                [ Background.color blue
                , Font.color white
                , Border.color darkBlue
                , paddingXY 16 16
                , Border.rounded 4
                
                ,spacing 100
                ]
                { onPress = Nothing
                , label = el [centerX,centerY] <| Element.text "GetPost"
                }
                
            , Element.table
            [ Element.centerX
            , Element.centerY
            , Element.spacing 5
            , Element.padding 10
            ]
            { data = posts
            , columns =
                [ { header = Element.text "userid"
                  , width = px 200
                  , view =
                        \post ->
                            Element.text   post.userid
                  }
                , { header = Element.text "id"
                  , width = fill
                  , view =
                        \post ->
                            Element.text   post.id
                  }
                  , { header = Element.text "title"
                  , width = fill
                  , view =
                        \post ->
                            Element.text post.title
                  }
                  , { header = Element.text "body"
                  , width = fill
                  , view =
                        \post ->
                            Element.text post.body
                  }
                ]
            }
            ]

Typelist.elm

module Typelist exposing (..)


type alias Post =
    {   userid:String
       ,id:String
       ,title :String
       ,body :String
    }


posts : List Post
posts =
    [ { userid = "1"
      , id="1"
      , title ="lorem ipsum"
      ,body = "deneme 13 123 12 "
      }
    , {  userid = "1"
      , id="2"
      , title ="lorem ipsum"
      ,body = "deneme 13 123 12asdasd "
      }
    ]

type Msg
    = Search String
     |Click