elm-uiでごちゃごちゃレイアウトしてみました

elm-uiという、cssに詳しくなくてもレイアウト面をうまいことやってくれるライブラリを見つけたので、勉強してみました。

作成したものはこちらです。
github
demo

困ったところ

ボーダーライン

リンクにマウスカーソルが乗ったときボーダーラインをつけようとしたのですが、レイアウトに影響を与えるスタイルは適用できないそうです。
elm-uiではレイアウトに影響を与えるものはAttribute型、レイアウトに影響を与えないものはDecoration型として分けられ、mouseOver関数に当てられるのはDecoration型だけということです。
DiscordでGadaさんに教えていただきました。
ありがとうございます。

解決策としてはhtmlAttributeかCSSになるみたいです。

コメントではinFrontを使う方法も教えていただきました。
ありがとうございます。

スクロールバー

これはあっさりあきらめてしまったのですが、columnにscrollbarY指定してスクロールバーを付けてみようとしたのですが、なぜか付きません。

スタイルが効かないことがある

フォントの色を変えようと、cssに書いたのですが色が変わらなかったりします。
ボーダーラインがelm-uiからだめならとcssに書いても効かなかったりします。
次第に諦めがちで、インラインstyleで指定するか、cssに書くか、elm-uiの関数を利用するか、どれかで効けばいいやとなりました。

モーダル

海外のどこかで見かけたものを改造して、そのまま貼り付けてしまいますが。

modalStyle : Float -> List (Element.Attribute msg)
modalStyle alpha =
    [ Background.color <| rgba 0.0 0.0 0.0 alpha
    , htmlAttribute <| Html.Attributes.style "position" "fixed"
    , htmlAttribute <| Html.Attributes.style "z-index" "1000"
    , htmlAttribute <| Html.Attributes.style "top" "0"
    , htmlAttribute <| Html.Attributes.style "left" "0"
    , htmlAttribute <| Html.Attributes.style "width" "100%"
    , htmlAttribute <| Html.Attributes.style "height" "100%"
    , style "cursor" "default"
    ]

こんなのをスタイルに指定してしまえば良さそうです。

フォーカスを利用したドロップダウンメニューの実装

モーダルとbelowを利用すればドロップダウンメニューを簡単に作れそうだと思ったのですが、それを先にしてしまうとフォーカスを利用したものは面倒で作らなくなってしまいそうなので、意味は余りなさそうですがチャレンジしてみました。

demoのdrop1がフォーカスを利用したもので、drop2がモーダルを利用したものです。

想像はしていましたが、苦労して完成させ、結果どれだけ意味があるのかわかりませんでした。
この方式の利点はなんなんでしょう?

drop1だと、メニューを開き外で右クリックや、ブラウザの検索バーにフォーカスが移るとメニューが消えます。
しかしスクロールバーをクリックしても消えませんし、そのままhoverの上にマウスカーソルを持っていくとそっちも開くのが面倒です。

シンプルなドロップダウンメニューの実装

透明な要素をサイズを最大にして表示させ、その上にメニューを表示するものです。

dropDown2 : Element Msg
dropDown2 =
    column []
        [ el (modalStyle 0 ++ [ Events.onClick CloseDropDown2 ]) <| none
        , column
            [ class "dropDown"
            , style "z-index" "2000"
            , paddingXY 0 10
            ]
            [ simpleDropDownItem "item1"
            , simpleDropDownItem "itemitemitem2"
            , simpleDropDownItem "item3"
            ]
        ]

Qiitaなどたぶんこの方式だと思います。

このシンプルな方法で問題ないどころか、こっちのほうがいいんじゃないかと思いました。

まとめ

勉強と探索のため、ごちゃごちゃとやってみて苦労した部分もありますが、シンプルに素早く作るのならelm-uiはかなり便利そうです。
まだ全然使いこなしてはいないと思うので、さらに真価を感じるシーンなどあるのだと思います。

レイアウトライブラリは他にもelm-neat-layoutというものがあるらしいです。
(キーボードのカーソルでスライドです)
結局css使うなら、、、と気になるライブラリです。