오늘 기억하는 것

Element.el 와 Element.Attribute msg 형

el : List (Attribute msg) -> Element msg -> Element msg

아티팩트

소개

#1 그럼 문자열을 단지 표시한 것만이었습니다.
오늘은 응용 프로그램처럼 보이는 것을 장식합시다.

Attribute msg 형식

elm-ui에서는 요소의 수식을 Attribute msg


패키지 사이트 를 보십시오. Element.Background 이나 Element.Border , Element.Font 에 외형과 관련된 Attribute 함수가 있습니다.

오늘은 Element.Background.color 함수를 사용하여 배경색을 붙여 보겠습니다.

텍스트에 배경색을 추가

Element.el 는 잡히 말하면 div입니다. text 에는 Attribute 를 지정할 수 없으므로 el

el [] <| text "Hello, world."

text 를 el

el [ Background.color <| rgb255 255 169 85 ] <| text "Hello, world."

배경색을 지정합니다.



지금까지의 코드

크기 변경

이것만으로 멋지기 때문에 크기를 변경합시다.

el [ Background.color <| rgb255 255 169 85 
   , width <| px 200
   , height <| px 200
   ] 
   <| text "Hello, world."

Element.width 및 Element.height를 사용하여 요소의 크기를 지정할 수 있습니다.
이번에는 픽셀로 크기를 지정해 보았습니다. 200×200의 사각형이 되었습니다

끝

오늘은 요소를 스타일링 해 보았습니다.

숙제

요소에 테두리를 추가합시다

문자 크기를 32px로합시다

#elm_ui_from_0