miyamoen/elm-origami - version: 2.0.0

for more information visit the package's GitHub page

Package contains the following modules:

elm-origami

elm-origami lets you define CSS in Elm. This package is forked from rtfeldman/elm-css. このドキュメントは日本語が主だよ。

Here's an example of how to define some elm-origami styles:

import Origami exposing (..)
import Origami.Html exposing (..)
import Origami.Html.Attributes exposing (css)
import Origami.Html.Events exposing (onClick)

view : Model -> Html Msg
view model =
    div
        [ css
            [ property "width" "100vw"
            , property "height" "100vh"
            , property "display" "flex"
            , property "justify-content" "center"
            , property "align-items" "center"
            ]
        ]
        [ button
            [ css
                [ property "display" "flex"
                , property "justify-content" "center"
                , property "align-items" "center"
                , property "position" "relative"
                , property "height" "50px"
                , property "width" "200px"
                , property "outline" "none"
                , property "border-width" "0"
                , property "background-color" "#f58c64"
                , property "color" "white"
                , property "font-size" "20px"
                , property "letter-spacing" "2px"
                , property "cursor" "pointer"
                , property "transition" "all 0.3s cubic-bezier(0.13, 0.99, 0.39, 1.01)"
                , property "box-shadow" "0 3px 5px rgba(0, 0, 0, 0.3)"
                , with ":hover" [ property "background-color" "#ef794c" ]
                , case model of
                    Initial ->
                        noStyle

                    Loading ->
                        let
                            loadingStyle =
                                batch
                                    [ property "content" <| qt ""
                                    , property "position" "absolute"
                                    , property "width" "60%"
                                    , property "height" "60%"
                                    , property "border-radius" "100%"
                                    , property "border" "calc(30px / 10) solid transparent"
                                    , animation
                                        [ ( "from", [ property "transform" "rotate(0deg)" ] )
                                        , ( "to", [ property "transform" "rotate(360deg)" ] )
                                        ]
                                    , property "animation-duration" "1s"
                                    , property "animation-iteration-count" "infinite"
                                    ]
                        in
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"

                            -- [Copyright (c) 2019 Epicmax LLC](https://epic-spinners.epicmax.co/)
                            , with "::after" [ loadingStyle, property "border-top-color" "#ffe9ef" ]
                            , with "::before"
                                [ loadingStyle
                                , property "border-bottom-color" "#ffe9ef"
                                , property "animation-direction" "alternate"
                                ]
                            ]

                    Completed ->
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"
                            , with "::after"
                                [ property "content" <| qt ""
                                , property "position" "absolute"
                                , property "width" "60%"
                                , property "height" "30%"
                                , property "border-left" "3px solid #fff"
                                , property "border-bottom" "3px solid #fff"
                                , property "transform" "rotate(-45deg)"
                                ]
                            ]
                ]
            ]
            [ if model == Initial then
                span
                    [ css
                        [ animation
                            [ ( "from", [ property "opacity" "0" ] )
                            , ( "to", [ property "opacity" "1" ] )
                            ]
                        , property "animation-duration" "1s"
                        ]
                    ]
                    [ text "Click Me!" ]

              else
                text ""
            ]
        ]

See the Origami module documentation for an explanation of how this code works.

なぜrtfeldman/elm-cssをフォークしたのか

利点

今後の予定

Origami の名前の意味

Changelog

Inspired by