mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-09-11 17:16:02 +03:00
Move workspace to separate area
This commit is contained in:
Matthew Griffith
parent
e6c851033e
commit
64c9670778
@ -65,6 +65,7 @@ garamond =
|
||||
, font =
|
||||
{ url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
|
||||
, name = "EB Garamond"
|
||||
, variants = []
|
||||
, adjustment =
|
||||
{ capital = default.capital
|
||||
, lowercase = default.lowercase
|
||||
@ -92,6 +93,7 @@ catamaran =
|
||||
, font =
|
||||
{ url = Just "https://fonts.googleapis.com/css?family=Catamaran"
|
||||
, name = "Catamaran"
|
||||
, variants = []
|
||||
, adjustment =
|
||||
{ capital = default.capital
|
||||
, lowercase = default.lowercase
|
||||
@ -119,6 +121,7 @@ poiret =
|
||||
, font =
|
||||
{ url = Just "https://fonts.googleapis.com/css?family=Poiret+One"
|
||||
, name = "Poiret One"
|
||||
, variants = []
|
||||
, adjustment =
|
||||
{ capital = default.capital
|
||||
, lowercase = default.lowercase
|
||||
@ -152,6 +155,7 @@ roboto =
|
||||
, baseline = default.baseline
|
||||
, descender = default.descender
|
||||
}
|
||||
, variants = []
|
||||
}
|
||||
}
|
||||
|
||||
@ -283,7 +287,46 @@ adjusted size adjustment =
|
||||
, centerX
|
||||
, centerY
|
||||
]
|
||||
[ el [ Font.size 32 ] (text "Standard Defaults in CSS")
|
||||
[ el
|
||||
[ Font.size 32 ]
|
||||
(text "New Adjustments in Els")
|
||||
, row
|
||||
[ Font.size 85
|
||||
, padding 80
|
||||
, spacing 48
|
||||
]
|
||||
[ el
|
||||
[ Font.size 95
|
||||
, Font.full
|
||||
, Background.color (rgb 0 0.8 0.9)
|
||||
, above (el [ Font.size 24, moveUp 6 ] (text "full height"))
|
||||
, onLeft <|
|
||||
el
|
||||
[ centerY
|
||||
, width (px 40)
|
||||
, height (px 95)
|
||||
, Background.color (rgb 0.9 0.8 0)
|
||||
]
|
||||
none
|
||||
]
|
||||
(text "Typography")
|
||||
, el
|
||||
[ Font.sizeByCapital
|
||||
, Font.size 85
|
||||
, Background.color (rgb 0 0.8 0.9)
|
||||
, above (el [ Font.size 24, moveUp 6 ] (text "corrected capital"))
|
||||
, onLeft <|
|
||||
el
|
||||
[ centerY
|
||||
, width (px 40)
|
||||
, height (px 85)
|
||||
, Background.color (rgb 0.9 0.8 0)
|
||||
]
|
||||
none
|
||||
]
|
||||
(text "Typography")
|
||||
]
|
||||
, el [ Font.size 32 ] (text "Standard Defaults in CSS")
|
||||
, row
|
||||
[ spacing 32
|
||||
, Font.size 120
|
||||
@ -302,30 +345,6 @@ adjusted size adjustment =
|
||||
]
|
||||
(text "Typography")
|
||||
]
|
||||
, el
|
||||
[ Font.size 32 ]
|
||||
(text "New Adjustments in Els")
|
||||
, row
|
||||
[ Font.size 120
|
||||
, padding 80
|
||||
]
|
||||
[ --corrected adjustment.full "corrected"
|
||||
-- , corrected adjustment.capital "corrected capital"
|
||||
el
|
||||
[ Font.sizeByCapital
|
||||
, Background.color (rgb 0 0.8 0.9)
|
||||
, above (el [ Font.size 12, moveUp 6 ] (text "corrected capital"))
|
||||
, onLeft <|
|
||||
el
|
||||
[ centerY
|
||||
, width (px 40)
|
||||
, height (px 120)
|
||||
, Background.color (rgb 0.9 0.8 0)
|
||||
]
|
||||
none
|
||||
]
|
||||
(text "Typography")
|
||||
]
|
||||
, row [ spacing 120 ]
|
||||
[ paragraph
|
||||
[ Font.size 25
|
||||
@ -465,8 +484,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
|
||||
onLeft
|
||||
(el
|
||||
[ moveLeft left
|
||||
|
||||
-- , moveUp (0.125 * toFloat size)
|
||||
, height (px (round (toFloat size * lineHeight)))
|
||||
]
|
||||
<|
|
||||
@ -522,23 +539,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
|
||||
, Border.width 1
|
||||
, Border.color (Element.rgb 0.5 0.5 0.5)
|
||||
, Background.color (Element.rgb 1 1 1)
|
||||
|
||||
-- , onRight
|
||||
-- (el
|
||||
-- [ height (px 0)
|
||||
-- , width (px 1200)
|
||||
-- , moveDown 8
|
||||
-- , Border.color (rgb 0 0 0)
|
||||
-- , Border.dashed
|
||||
-- , Border.widthEach
|
||||
-- { top = 1
|
||||
-- , right = 0
|
||||
-- , bottom = 0
|
||||
-- , left = 0
|
||||
-- }
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
]
|
||||
, value = adjustment
|
||||
}
|
||||
|
||||
233
experiments/workspace/Basic.elm
Normal file
233
experiments/workspace/Basic.elm
Normal file
@ -0,0 +1,233 @@
|
||||
module Main exposing (main)
|
||||
|
||||
{-| -}
|
||||
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Font as Font
|
||||
|
||||
|
||||
box =
|
||||
el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none
|
||||
|
||||
|
||||
main =
|
||||
Element.layout
|
||||
[ Background.color (rgba 1 1 1 1)
|
||||
, Font.color (rgba 1 1 1 1)
|
||||
, Font.size 64
|
||||
, Font.family
|
||||
[ Font.external
|
||||
{ url = "https://fonts.googleapis.com/css?family=EB+Garamond"
|
||||
, name = "EB Garamond"
|
||||
}
|
||||
, Font.sansSerif
|
||||
]
|
||||
]
|
||||
<|
|
||||
column
|
||||
[ spacing 40
|
||||
, Background.color (rgb 1 1 1)
|
||||
, centerX
|
||||
, inFront
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
]
|
||||
(text "in front of everything")
|
||||
)
|
||||
, behindContent
|
||||
(el
|
||||
[ Background.color (rgb 0.5 0.7 0)
|
||||
, Font.color (rgb 1 1 1)
|
||||
, moveDown 30
|
||||
]
|
||||
(text "hi there")
|
||||
)
|
||||
]
|
||||
[ el
|
||||
[ Background.color (rgba 0 0.9 0.8 1)
|
||||
, Font.color (rgb 0 0 0)
|
||||
, behindContent
|
||||
(el
|
||||
[ Background.color (rgb 0.9 0.9 0)
|
||||
, Font.color (rgb 1 1 1)
|
||||
]
|
||||
(text "hi there")
|
||||
)
|
||||
, inFront
|
||||
(el [ Background.color (rgb 0.9 0.9 0.5) ] (text "in front of stuff, behind one"))
|
||||
|
||||
-- , Font.sizeByCapital
|
||||
-- , Font.variant Font.smallCaps
|
||||
-- , Font.variant Font.ligatures
|
||||
-- , Font.variant Font.diagonalFractions
|
||||
]
|
||||
(text "Quality 1st Hello stylish friend! ofl 123456 1/3")
|
||||
, row
|
||||
[ Background.color (rgba 0 0.9 0.8 1)
|
||||
, Font.color (rgb 0 0 0)
|
||||
, spacing 87
|
||||
, behindContent
|
||||
(el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))
|
||||
, inFront
|
||||
(el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
|
||||
|
||||
-- , Font.sizeByCapital
|
||||
-- , Font.variant Font.smallCaps
|
||||
-- , Font.variant Font.ligatures
|
||||
-- , Font.variant Font.diagonalFractions
|
||||
]
|
||||
[ text "Quality 1st Hello stylish friend! ofl 123456 1/3"
|
||||
]
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
|
||||
-- , below
|
||||
-- (el
|
||||
-- [ Background.color (rgb 1 0 0)
|
||||
-- , width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , moveDown 30
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
, below
|
||||
(el
|
||||
[ Background.color (rgb 0.1 0.1 0.6)
|
||||
, width (px 150)
|
||||
, height (px 150)
|
||||
|
||||
-- , alignBottom
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
none
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, above
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
|
||||
-- , moveUp 30
|
||||
]
|
||||
none
|
||||
)
|
||||
, onRight
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height fill
|
||||
|
||||
-- , moveUp 30
|
||||
]
|
||||
none
|
||||
)
|
||||
|
||||
-- , inFront
|
||||
-- (el
|
||||
-- [ Background.color (rgb 0.1 0.1 0.6)
|
||||
-- , width (px 150)
|
||||
-- , height (px 150)
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
-- , above
|
||||
-- (el
|
||||
-- [ Background.color (rgb 1 0 0)
|
||||
-- , width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , moveUp 30
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
]
|
||||
none
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, below
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width fill
|
||||
, height (px 20)
|
||||
]
|
||||
none
|
||||
)
|
||||
, above
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width fill
|
||||
, height (px 20)
|
||||
]
|
||||
none
|
||||
)
|
||||
, onLeft
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height fill
|
||||
]
|
||||
none
|
||||
)
|
||||
, onRight
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height fill
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
none
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, inFront
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width fill
|
||||
, height fill
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
none
|
||||
]
|
||||
|
||||
|
||||
|
||||
-- row
|
||||
-- [ --width (px 420)
|
||||
-- padding 0
|
||||
-- , spacing 20
|
||||
-- , Background.color (rgb 0.2 0.2 0.3)
|
||||
-- ]
|
||||
-- [ box
|
||||
-- , box
|
||||
-- , box
|
||||
-- -- , box
|
||||
-- -- , box
|
||||
-- ]
|
||||
-- wrappedRow
|
||||
-- [ width (px 420)
|
||||
-- , padding 10
|
||||
-- , spacing 20
|
||||
-- , Background.color (rgb 0.2 0.2 0.3)
|
||||
-- ]
|
||||
-- [ box
|
||||
-- , box
|
||||
-- , box
|
||||
-- , box
|
||||
-- , box
|
||||
-- ]
|
||||
234
experiments/workspace/Form.elm
Normal file
234
experiments/workspace/Form.elm
Normal file
@ -0,0 +1,234 @@
|
||||
module Main exposing (Form, Lunch(..), Msg(..), blue, darkBlue, grey, init, main, red, update, view, white)
|
||||
|
||||
{-| -}
|
||||
|
||||
import Browser
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Element.Input as Input
|
||||
import Element.Region as Region
|
||||
import Html.Attributes
|
||||
|
||||
|
||||
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 =
|
||||
Browser.sandbox
|
||||
{ init = init
|
||||
, view = view
|
||||
, update = update
|
||||
}
|
||||
|
||||
|
||||
init =
|
||||
{ username = ""
|
||||
, password = ""
|
||||
, agreeTOS = False
|
||||
, comment = "Extra hot sauce?\n\n\nYes pls"
|
||||
, lunch = Gyro
|
||||
, spiciness = 2
|
||||
}
|
||||
|
||||
|
||||
type alias Form =
|
||||
{ username : String
|
||||
, password : String
|
||||
, agreeTOS : Bool
|
||||
, comment : String
|
||||
, lunch : Lunch
|
||||
, spiciness : Float
|
||||
}
|
||||
|
||||
|
||||
type Msg
|
||||
= Update Form
|
||||
|
||||
|
||||
update msg model =
|
||||
case Debug.log "msg" msg of
|
||||
Update new ->
|
||||
new
|
||||
|
||||
|
||||
id i =
|
||||
htmlAttribute (Html.Attributes.id i)
|
||||
|
||||
|
||||
type Lunch
|
||||
= Burrito
|
||||
| Taco
|
||||
| Gyro
|
||||
|
||||
|
||||
view model =
|
||||
Element.layout
|
||||
[ Font.size 20
|
||||
]
|
||||
<|
|
||||
Element.column
|
||||
[ width (px 800)
|
||||
, height shrink
|
||||
, centerY
|
||||
, centerX
|
||||
, spacing 36
|
||||
, padding 10
|
||||
]
|
||||
[ el
|
||||
[ Region.heading 1
|
||||
, alignLeft
|
||||
, Font.size 36
|
||||
]
|
||||
(text "Welcome to the Stylish Elephants Lunch Emporium")
|
||||
, Input.radio
|
||||
[ spacing 12
|
||||
, alpha 0.5
|
||||
, id "radio-1"
|
||||
]
|
||||
{ selected = Just model.lunch
|
||||
, onChange = \new -> Update { model | lunch = new }
|
||||
, label =
|
||||
-- Input.labelHidden "Just a label"
|
||||
Input.labelAbove
|
||||
[ Font.size 14
|
||||
, paddingXY 0 12
|
||||
]
|
||||
(text "What would you like for lunch?")
|
||||
, options =
|
||||
[ Input.option Gyro (text "Gyro")
|
||||
, Input.option Burrito (text "Burrito")
|
||||
, Input.option Taco (text "Taco")
|
||||
]
|
||||
}
|
||||
, Input.text
|
||||
[ spacing 12
|
||||
, id "text-1"
|
||||
]
|
||||
{ text = model.username
|
||||
, placeholder =
|
||||
Just
|
||||
(Input.placeholder
|
||||
[ focused
|
||||
[ moveUp 30 ]
|
||||
]
|
||||
(text "Placeholder Label")
|
||||
)
|
||||
, onChange = \new -> Update { model | username = new }
|
||||
, label =
|
||||
Input.labelHidden "Just a label"
|
||||
|
||||
-- Input.labelBelow
|
||||
-- [ Font.size 14
|
||||
-- , focused
|
||||
-- [ moveUp 30 ]
|
||||
-- ]
|
||||
-- (text "Username")
|
||||
}
|
||||
, Input.currentPassword [ spacing 12, width shrink ]
|
||||
{ text = model.password
|
||||
, placeholder = Nothing
|
||||
, onChange = \new -> Update { model | password = new }
|
||||
, label = Input.labelAbove [ Font.size 14 ] (text "Password")
|
||||
, show = False
|
||||
}
|
||||
, Input.multiline
|
||||
[ height
|
||||
(shrink
|
||||
|> maximum 400
|
||||
)
|
||||
, spacing 12
|
||||
, id "multiline-1"
|
||||
]
|
||||
{ text = model.comment
|
||||
, placeholder = Just (Input.placeholder [] (text "Extra hot sauce?\n\n\nYes pls"))
|
||||
, onChange = \new -> Update { model | comment = new }
|
||||
, label =
|
||||
-- Input.labelAbove [ Font.size 14 ] (text "Leave a comment!")
|
||||
Input.labelHidden "Just a label"
|
||||
, spellcheck = False
|
||||
}
|
||||
, Input.checkbox [ id "checkbox-1" ]
|
||||
{ checked = model.agreeTOS
|
||||
, onChange = \new -> Update { model | agreeTOS = new }
|
||||
, icon = Input.defaultCheckbox
|
||||
, label =
|
||||
-- Input.labelRight [] (text "Agree to Terms of Service")
|
||||
Input.labelHidden "Just a label"
|
||||
}
|
||||
, Input.slider
|
||||
[ Element.height (Element.px 30)
|
||||
, Element.behindContent
|
||||
(Element.el
|
||||
[ Element.width Element.fill
|
||||
, Element.height (Element.px 2)
|
||||
, Element.centerY
|
||||
, Background.color grey
|
||||
, Border.rounded 2
|
||||
]
|
||||
Element.none
|
||||
)
|
||||
]
|
||||
{ onChange = \new -> Update { model | spiciness = new }
|
||||
, label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
|
||||
, min = 0
|
||||
, max = 3.2
|
||||
, step = Nothing
|
||||
, value = model.spiciness
|
||||
, thumb =
|
||||
Input.defaultThumb
|
||||
}
|
||||
, --el [height (px 300), width (px 30)] <|
|
||||
Input.slider
|
||||
[ Element.width (Element.px 40)
|
||||
, Element.height (Element.px 80)
|
||||
, Element.behindContent
|
||||
(Element.el
|
||||
[ Element.height Element.fill
|
||||
, Element.width (Element.px 2)
|
||||
, Element.centerX
|
||||
, Background.color grey
|
||||
, Border.rounded 2
|
||||
]
|
||||
Element.none
|
||||
)
|
||||
]
|
||||
{ onChange = \new -> Update { model | spiciness = new }
|
||||
, label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
|
||||
, min = 0
|
||||
, max = 3.2
|
||||
, step = Nothing
|
||||
, value = model.spiciness
|
||||
, thumb =
|
||||
Input.defaultThumb
|
||||
}
|
||||
, Input.button
|
||||
[-- Background.color blue
|
||||
-- , Font.color white
|
||||
-- , Border.color darkBlue
|
||||
-- , paddingXY 32 16
|
||||
-- , Border.rounded 3
|
||||
-- , width fill
|
||||
]
|
||||
{ onPress = Nothing
|
||||
, label = Element.text "Place your lunch order!"
|
||||
}
|
||||
]
|
||||
204
experiments/workspace/Scrollbars.elm
Normal file
204
experiments/workspace/Scrollbars.elm
Normal file
@ -0,0 +1,204 @@
|
||||
module Main exposing (main)
|
||||
|
||||
{-| -}
|
||||
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Font as Font
|
||||
|
||||
|
||||
box =
|
||||
el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none
|
||||
|
||||
|
||||
main =
|
||||
Element.layout
|
||||
[ Background.color (rgba 1 1 1 1)
|
||||
, Font.color (rgba 1 1 1 1)
|
||||
, Font.size 64
|
||||
|
||||
-- , Font.italic
|
||||
, Font.family
|
||||
[ Font.external
|
||||
{ url = "https://fonts.googleapis.com/css?family=EB+Garamond"
|
||||
, name = "EB Garamond"
|
||||
}
|
||||
|
||||
-- Font.with
|
||||
-- { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
|
||||
-- , name = "EB Garamond"
|
||||
-- , adjustment =
|
||||
-- { capital = 1.09
|
||||
-- , lowercase = 0.81
|
||||
-- , baseline = 0.385
|
||||
-- , descender = 0.095
|
||||
-- }
|
||||
-- , variants =
|
||||
-- [ Font.swash 1
|
||||
-- , Font.smallCaps
|
||||
-- -- , Font.diagonalFractions
|
||||
-- -- , Font.ordinal
|
||||
-- -- , Font.ligatures
|
||||
-- ]
|
||||
-- }
|
||||
-- Font.with
|
||||
-- { url = Just "https://fonts.googleapis.com/css?family=Raleway"
|
||||
-- , name = "Raleway"
|
||||
-- , adjustment =
|
||||
-- { capital = 1.09
|
||||
-- , lowercase = 0.81
|
||||
-- , baseline = 0.385
|
||||
-- , descender = 0.095
|
||||
-- }
|
||||
-- , variants =
|
||||
-- [ Font.swash 2
|
||||
-- , Font.ordinal
|
||||
-- , Font.ligatures
|
||||
-- -- , Font.small
|
||||
-- ]
|
||||
-- }
|
||||
, Font.sansSerif
|
||||
]
|
||||
]
|
||||
<|
|
||||
column
|
||||
[ spacing 20
|
||||
, Background.color (rgb 1 1 1)
|
||||
, inFront
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height (px 20)
|
||||
]
|
||||
none
|
||||
)
|
||||
, behindContent
|
||||
(el
|
||||
[ Background.color (rgb 0.5 0.7 0)
|
||||
, Font.color (rgb 1 1 1)
|
||||
, moveDown 30
|
||||
]
|
||||
(text "hi there")
|
||||
)
|
||||
]
|
||||
[ el
|
||||
[ Background.color (rgba 0 0.9 0.8 1)
|
||||
, Font.color (rgb 0 0 0)
|
||||
, behindContent
|
||||
(el
|
||||
[ Background.color (rgb 0.9 0.9 0)
|
||||
, Font.color (rgb 1 1 1)
|
||||
]
|
||||
(text "hi there")
|
||||
)
|
||||
, inFront
|
||||
(el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
|
||||
|
||||
-- , Font.sizeByCapital
|
||||
-- , Font.variant Font.smallCaps
|
||||
-- , Font.variant Font.ligatures
|
||||
-- , Font.variant Font.diagonalFractions
|
||||
]
|
||||
(text "Quality 1st Hello stylish friend! ofl 123456 1/3")
|
||||
, el
|
||||
[ Background.color (rgba 0 0.9 0.8 1)
|
||||
, Font.color (rgb 0 0 0)
|
||||
, behindContent
|
||||
(el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))
|
||||
, inFront
|
||||
(el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
|
||||
|
||||
-- , Font.sizeByCapital
|
||||
-- , Font.variant Font.smallCaps
|
||||
-- , Font.variant Font.ligatures
|
||||
-- , Font.variant Font.diagonalFractions
|
||||
]
|
||||
(text "Quality 1st Hello stylish friend! ofl 123456 1/3")
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
|
||||
-- , below
|
||||
-- (el
|
||||
-- [ Background.color (rgb 1 0 0)
|
||||
-- , width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , moveDown 30
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
, below
|
||||
(el
|
||||
[ Background.color (rgb 0.1 0.1 0.6)
|
||||
, width (px 150)
|
||||
, height (px 150)
|
||||
|
||||
-- , alignBottom
|
||||
]
|
||||
none
|
||||
)
|
||||
]
|
||||
none
|
||||
, el
|
||||
[ Background.color (rgb 0.1 0.1 0.1)
|
||||
, width (px 200)
|
||||
, height (px 200)
|
||||
, onRight
|
||||
(el
|
||||
[ Background.color (rgb 1 0 0)
|
||||
, width (px 20)
|
||||
, height fill
|
||||
|
||||
-- , moveUp 30
|
||||
]
|
||||
none
|
||||
)
|
||||
|
||||
-- , inFront
|
||||
-- (el
|
||||
-- [ Background.color (rgb 0.1 0.1 0.6)
|
||||
-- , width (px 150)
|
||||
-- , height (px 150)
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
-- , above
|
||||
-- (el
|
||||
-- [ Background.color (rgb 1 0 0)
|
||||
-- , width (px 20)
|
||||
-- , height (px 20)
|
||||
-- , moveUp 30
|
||||
-- ]
|
||||
-- none
|
||||
-- )
|
||||
]
|
||||
none
|
||||
]
|
||||
|
||||
|
||||
|
||||
-- row
|
||||
-- [ --width (px 420)
|
||||
-- padding 0
|
||||
-- , spacing 20
|
||||
-- , Background.color (rgb 0.2 0.2 0.3)
|
||||
-- ]
|
||||
-- [ box
|
||||
-- , box
|
||||
-- , box
|
||||
-- -- , box
|
||||
-- -- , box
|
||||
-- ]
|
||||
-- wrappedRow
|
||||
-- [ width (px 420)
|
||||
-- , padding 10
|
||||
-- , spacing 20
|
||||
-- , Background.color (rgb 0.2 0.2 0.3)
|
||||
-- ]
|
||||
-- [ box
|
||||
-- , box
|
||||
-- , box
|
||||
-- , box
|
||||
-- , box
|
||||
-- ]
|
||||
65
experiments/workspace/Table.elm
Normal file
65
experiments/workspace/Table.elm
Normal file
@ -0,0 +1,65 @@
|
||||
module Main exposing (..)
|
||||
|
||||
{-| -}
|
||||
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Font as Font
|
||||
import Element.Input
|
||||
import Element.Lazy
|
||||
|
||||
|
||||
type alias Person =
|
||||
{ firstName : String
|
||||
, lastName : String
|
||||
}
|
||||
|
||||
|
||||
persons : List Person
|
||||
persons =
|
||||
[ { firstName = "David"
|
||||
, lastName = "Bowie"
|
||||
}
|
||||
, { firstName = "Florence"
|
||||
, lastName = "Welch"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
main =
|
||||
Element.layout
|
||||
[ Background.color (rgba 0 0 0 1)
|
||||
, Font.color (rgba 1 1 1 1)
|
||||
, Font.italic
|
||||
, Font.size 32
|
||||
, Font.family
|
||||
[ Font.external
|
||||
{ url = "https://fonts.googleapis.com/css?family=EB+Garamond"
|
||||
, name = "EB Garamond"
|
||||
}
|
||||
, Font.sansSerif
|
||||
]
|
||||
]
|
||||
<|
|
||||
Element.table
|
||||
[ Element.centerX
|
||||
, Element.centerY
|
||||
, Element.spacing 5
|
||||
, Element.padding 10
|
||||
]
|
||||
{ data = persons
|
||||
, columns =
|
||||
[ { header = Element.text "First Name"
|
||||
, width = px 200
|
||||
, view =
|
||||
\person ->
|
||||
Element.text person.firstName
|
||||
}
|
||||
, { header = Element.text "Last Name"
|
||||
, width = fill
|
||||
, view =
|
||||
\person ->
|
||||
Element.text person.lastName
|
||||
}
|
||||
]
|
||||
}
|
||||
25
experiments/workspace/elm.json
Normal file
25
experiments/workspace/elm.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"type": "application",
|
||||
"source-directories": [
|
||||
".",
|
||||
"../src/"
|
||||
],
|
||||
"elm-version": "0.19.0",
|
||||
"dependencies": {
|
||||
"direct": {
|
||||
"elm/browser": "1.0.0",
|
||||
"elm/core": "1.0.0",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/json": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.0"
|
||||
},
|
||||
"indirect": {
|
||||
"elm/time": "1.0.0",
|
||||
"elm/url": "1.0.0"
|
||||
}
|
||||
},
|
||||
"test-dependencies": {
|
||||
"direct": {},
|
||||
"indirect": {}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user