elm-ui

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

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

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

제목이 부담스럽다 죄송합니다

요약

explain의 document

재게재

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 "🐐🐐🐐🐐🐐"
        ]

explain Debug.todo를 attribute에 추가하면 해당 요소와 자식 요소에 테두리가 붙어 UI 디버깅에 유용합니다.

내용은 이상입니다. 덜 정보가 없으므로 조심하십시오.

"elm-ui를 사용해 dom 보고 보면 가득한 div가 있는데!"

elm-ui는 HTML과 CSS의 역사를 은폐하고 평화와 질서를 가져온 UI 프레임워크입니다.
그렇다고 해도 HTML과 CSS로 구성되어 있는 것에 변함은 없고 elm-ui의 기분을 모두 알아볼 수 없습니다.

그 중 어쩐지 잘 안 되고 devtool 열어서 dom의 구조 보게 됩니다. 어리석은
elm-ui는 쓰고 있다 Element 와 실제의 dom에 차이가 나오므로 익숙하지 않다고 어느 것이 스스로 쓴 el 인가, 아니면 암묵적으로 생성된 것인지 모릅니다.

그래서 처음에는 explain Debug.todo합시다!

사용법

    row [ width fill, height fill, spacing 16, explain Debug.todo ]
        [ text "hello"
        , text "world"
        ]

explain Debug.todo 를 보고 싶은 요소의 attributes에 추가하기만 하면 됩니다.

"Debug.todo는 무슨 일인가? 어떤 구조?"

테두리를 긁는 것만으로 어째서 Debug.todo 왜 나올까라고 하면, Debug 모듈을 사용하고 있으면 --optimize 붙여 compile 할 수 없게 되기 때문입니다

즉 publish나 릴리스 빌드시에 explain 가 섞이지 않는 것이 보증되고 있습니다

메커니즘

explain 형식에는 Todo -> Attribute msg
Element.elm

Element.elm

type alias Todo =
    String -> Never

이 형식은 Debug.todo의 alias라고 씁니다.

Debug.elm

Debug.elm

todo : String -> a
todo =
  Elm.Kernel.Debug.todo

이 유형 변수 a는 모든 유형이 될 수 있습니다. 그러니까 todo 는 임의의 위치에 쓸 수 있는 것이군요

그런데 형 Todo 입니다만 String -> Never 그래서 String -> a 의 todo 로 채울 수 있네요.
이 Never 하지만 요컨대에 값을 생성할 수 없는 형태입니다. 즉 String -> Never 라는 함수의 구현은 절대로 쓸 수 없는 것이군요. 그래서 explain 의 인수에는 Debug.todo 밖에 둘 수 없다는 것이 됩니다

요약

explain Debug.todo 의 설명을 했습니다만 Never 의 사용법 굉장하지 않습니까? 그렇게 쓰는 느낌입니다.

다음은 어쩌면 padding, spacing에 관하여 적당하게 쓰는 느낌입니다

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

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

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