miyamoen/elm-origami/2.0.0

Origami.StyleTag

Create a style tag.

全体に適用したいCSSを書けます。

Create

type alias Block =
Block
styleTag : List Block -> Node msg

Create a style tag.

styleTag
    [ style ".class" [ property "key" "value" ] ]

...outputs

    <style>
    .class {
        key: value;
    }
    </style>
styleTag_ : List Block -> Node msg

Version of VirtualDom.Node.

Blocks

style : String -> List Property -> Block

Create a style block.

styleTag
    [ style ".class" [ property "key" "value" ] ]

...outputs

    <style>
    .class {
        key: value;
    }
    </style>
media : String -> List Block -> Block

Create a media block.

styleTag
    [ media "screen" [ style ".class" [ property "key" "value" ] ] ]

...outputs

    <style>
    @media screen {
        .class {
            key: value;
        }
    }
    </style>
fontFace : List Property -> Block

Create a font-face block.

styleTag
    [ fontFace [ property "key" "value" ] ]

...outputs

    <style>
    @font-face {
        key: value;
    }
    </style>
type alias Property =
Property
property : String -> String -> Property
  • Origami.propertyとは非互換

Keyframes

keyframes : String -> List ( String, List Property ) -> Block

Create a keyframes block.

styleTag
    [ keyframes "spin"
        [ ( "from", [ property "key" "value" ] )
        , ( "20%, 80%", [ property "key" "value" ] )
        , ( "to", [ property "key" "value" ] )
        ]
    ]

...outputs

    <style>
    @keyframes spin {
        from {
            key: value;
        }

        20%, 80% {
            key: value;
        }

        to {
            key: value;
        }
    }
    </style>