├── LICENSE ├── README.md ├── elm-package.json └── src └── SemanticUi.elm /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Oliver Mader 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # elm-semantic-ui 2 | 3 | Elm bindings for Semantic UI. 4 | 5 | ```Elm 6 | import Html exposing (Html) 7 | import SemanticUi exposing (..) 8 | 9 | view : Html 10 | view = 11 | button "click me!" 12 | |> size Large 13 | |> render 14 | ``` 15 | -------------------------------------------------------------------------------- /elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "summary": "Elm bindings for Semantic UI", 4 | "repository": "https://github.com/b52/elm-semantic-ui.git", 5 | "license": "MIT", 6 | "source-directories": [ 7 | "src" 8 | ], 9 | "exposed-modules": [ 10 | "SemanticUi" 11 | ], 12 | "dependencies": { 13 | "elm-lang/core": "2.1.0 <= v < 3.0.0", 14 | "evancz/elm-html": "4.0.1 <= v < 5.0.0" 15 | }, 16 | "elm-version": "0.15.1 <= v < 0.16.0" 17 | } -------------------------------------------------------------------------------- /src/SemanticUi.elm: -------------------------------------------------------------------------------- 1 | module SemanticUi 2 | ( Element 3 | , render 4 | 5 | , Size(..) 6 | , size 7 | 8 | , Button 9 | , button 10 | , button' 11 | ) where 12 | 13 | {-| Elm bindings for Semantic UI using a declarative API and useful 14 | abstractions. 15 | 16 | # Rendering 17 | 18 | @docs Element, render 19 | 20 | # Styling 21 | 22 | @docs Size, size 23 | 24 | # Elements 25 | 26 | ## Button 27 | 28 | @docs Button, button, button' 29 | 30 | -} 31 | 32 | import List exposing (append) 33 | import String exposing (join) 34 | 35 | import Html exposing (Html, Attribute) 36 | import Html as H 37 | import Html.Attributes as A 38 | 39 | 40 | {-| An element defines a control. A control has a `state` and a function to 41 | turn this state into an `Html` object. -} 42 | type alias Element a = 43 | { state : a 44 | , render : a -> Html 45 | } 46 | 47 | {-| Create the `Html` for a Semantic UI `Element`. 48 | 49 | button "click" |> render 50 | -} 51 | render : Element a -> Html 52 | render element = 53 | element.render element.state 54 | 55 | 56 | element : a -> (a -> Html) -> Element a 57 | element state render = 58 | { state = state, render = render } 59 | 60 | style : (a -> a) -> Element a -> Element a 61 | style f element = 62 | let oldStyle = element.state 63 | newStyle = f oldStyle 64 | in { element | state <- newStyle } 65 | 66 | 67 | {-| Some elements might have different sizes. -} 68 | type Size 69 | = Mini 70 | | Tiny 71 | | Small 72 | | Medium 73 | | Large 74 | | Big 75 | | Huge 76 | | Massive 77 | 78 | type alias Sized a = 79 | { a | size : Size } 80 | 81 | {-| Adjust the size of an element. 82 | 83 | button "click" |> size Huge 84 | -} 85 | size : Size -> Element (Sized a) -> Element (Sized a) 86 | size size = style <| \state -> { state | size <- size } 87 | 88 | 89 | type alias Readable a = 90 | { a | text : String } 91 | 92 | {-| Adjust the text of an element. 93 | 94 | button "click" |> text "DON'T click" 95 | -} 96 | text : String -> Element (Readable a) -> Element (Readable a) 97 | text text = style <| \state -> { state | text <- text } 98 | 99 | 100 | {-| The button state driving the visual appearance. -} 101 | type alias Button = 102 | { text : String 103 | , size : Size 104 | } 105 | 106 | {-| A button with a text. -} 107 | button : String -> Element Button 108 | button text = 109 | let 110 | state = 111 | { text = text 112 | , size = Medium 113 | } 114 | 115 | render state = 116 | H.div 117 | [ A.class "ui button" ] 118 | [ H.text state.text ] 119 | 120 | in element state render 121 | 122 | {-| A button with an empty text. -} 123 | button' : Element Button 124 | button' = button "" 125 | --------------------------------------------------------------------------------