elm-ui

CSS를 할 수 없어도 안심! elm-ui로 쉬운 레이아웃!

이제 상하 좌우 중앙 정렬로 구구하지 않는다! elm-ui로 쉬운 레이아웃!

요소의 검증은 더 이상 필요 없다! ? elm-ui로 간단 UI 디버깅!

「지금까지 상하 좌우 중앙 정렬로 구구한 횟수를 기억하고 있는가?」

정렬은 중요합니다. 특히 중앙에 정렬하려고 생각하고 매번 조사하는 사람은 있다고 생각합니다.

무려 elm-ui라면 간단 솔직하게 임의의 요소를 갖출 수 있게 됩니다
그럼 실제로 해보자!

"우선 row, column이 있었다"

Ellie 에서 실제 코드와 외형을 확인하십시오.

view : Element msg
view =
    row [ width fill, height fill, spacing 16 ]
        [ text "hello", text "world" ]

그런데, 보시다시피 왼쪽 정렬의 위아래 중앙 정렬로 요소가 표시됩니다.
조금 설명을 위해 exploin을 넣자.

Ellie



갈색 선이 부모 row , 녹색? 의 점선이 자식 요소가 됩니다.row 에는 fill 를 지정하여 꽉 찼기 때문에 퍼지고 있습니다. 아이 요소는 아무것도하지 않아도 상하 중앙 정렬이되었습니다.

그럼 좌우도 중앙에 정렬합시다.

Ellie

view : Element msg
view =
    row [ width fill, height fill, spacing 16, explain Debug.todo ]
        [ el [ centerX ] <| text "hello"
        , el [ centerX ] <|text "world"
        , el [ centerX ] <|text "🐐🐐🐐🐐🐐"
        ]

네, 중간에 갔어요
이와 같이 row ( column ) 안을 정렬시키고 싶은 경우, 아이 요소에 여기 근처의 attribute 를 지정하면 좋은 느낌으로 할 수 있다고 생각합니다
row 에서는 왼쪽 정렬 상하 중앙 정렬이 디폴트였습니다만 column 에서는 좌우 중앙, 위 정렬이 됩니다

미세한 동작에 관해서는 직접 지정해보십시오.
우선 헤더에 자주 있다 왼쪽에 로고 오른쪽에 메뉴

note1
"explain Debug.todo는 무엇?"
여기에 전 썼지만 다음 번 (미정)에 Qiita에 씁니다

note2
「파선이 이중이 되어 있습니다만」
구조까지는 짓밟아 조사하지 않으므로 쓸 수 없습니다. 하지만 왠지 모르겠어요?

"justify-content는?"

justify-content 라든지 align-items 는 몰라요. 단순히 centerY 라든지 centerX 입니까? 기억하셨어요?

실제로 flexbox이므로 justify-content라든지 구현되고 있겠지만 의식한 것(의식하지 않으면 안된 것)은 없습니다

요약

elm-ui 좋아요.

이번에는 이 정도로 하고 다음에(미정입니다)는 elm-ui에서의 디버그(explain)에 대해서 쓰자고 생각합니다

CSS를 할 수 없어도 안심! elm-ui로 쉬운 레이아웃!

이제 상하 좌우 중앙 정렬로 구구하지 않는다! elm-ui로 쉬운 레이아웃!

요소의 검증은 더 이상 필요 없다! ? elm-ui로 간단 UI 디버깅!