NaturalUi

Easy-going, opinionated UI kit.

UI elements

button : List (Setting Never Never msg) -> Html msg

Button element

card : List (Setting Never Never msg) -> Html msg

Card element

input : List (Setting Never String msg) -> Html msg

Input element

searchBar : List (Setting Never String msg) -> Html msg

SearchBar element

loader : List (Setting Never Never msg) -> Html msg

Loader element

link : List (Setting Never Never msg) -> Html msg

Link element

loaderWrapper : List (Setting Never Never msg) -> Html msg

LoaderWrapper element

formPack : List (Setting Never Never msg) -> Html msg

FormPack element

listEditor : List (Setting State Data msg) -> Html msg

List editor element

tabs : List (Setting State (Data msg) msg) -> Html msg

Tabs element

switch : List (Setting Never Never msg) -> Html msg

SearchBar element

toggle : List (Setting State Data msg) -> Html msg

Toggle element

smartTable : List (Setting State (Data msg) msg) -> Html msg

Button element

simpleLink : List (Setting Never Never msg) -> Html msg

Simple link element

Attributes

addNewItemLabel : String -> Setting state data msg

Label for an 'add new item' prompt

help : String -> Setting state data msg

Help text

value : data -> Setting state data msg

Form input value

addNewItemPlaceholder : String -> Setting state data msg

Placeholder for an 'add new item' form field placeholder

state : state -> Setting state data msg

Internal UI widget state, see http://package.elm-lang.org/packages/evancz/elm-sortable-table/1.0.1/Table#view

data : data -> Setting state data msg

View data 'owned' by the outside application. Of course, all state is owned by the outside app, but contrary to state, this holds core application data that may reach servers later.

children : List (Html msg) -> Setting state data msg

Html children

toMsg : (state -> data -> msg) -> Setting state data msg

A'la elm-sortable-table, this is how components communicate to the outside application. The slight modification is that components always pass back both their new internal state and the new data through this method.

warning : Setting state data msg

Warning theme

error : Setting state data msg

Error theme

enabled : Bool -> Setting state data msg

Enabled state

placeholder : String -> Setting state data msg

Placeholder

type_ : String -> Setting state data msg

Html type attribute, used for form element

htmlAttrs : List (Attribute msg) -> Setting state data msg

Html attributes for the UI element's container node (style, class name, etc.)

icon : Html msg -> Setting state data msg

SVG icon

id : String -> Setting state data msg

label : String -> Setting state data msg

Labels, used for forms and sections

navigate : (String -> msg) -> Setting state data msg

Client-side navigation message, taking a path string as a parameter

onClick : msg -> Setting state data msg

Click handler

onInput : (String -> msg) -> Setting state data msg

Input handler

onInputWithCursor : (Int -> String -> msg) -> Setting state data msg

Input handler that also passes the cursor information, used for mid-sentence autocomplete

onSuggestion : (data -> msg) -> Setting state data msg

Handler for when the user accepts a suggestion

suggestions : List data -> Setting state data msg

Suggestions for words that autocomplete should recognize

url : String -> Setting state data msg

Url for links and help sections

Icons

addNew : Html msg

AddNew icon

barbell : Html msg

Barbell icon

webhooks : Html msg

Webhooks icon

checkmark : Html msg

Checkmark icon

variable : Html msg

Variable icon

slot : Html msg

Slot icon

duplicate : Html msg

Duplicate icon

trash : Html msg

Trash icon

target : Html msg

Target icon

channels : Html msg

Channels icon

pen : Html msg

Pen icon

gear : Html msg

Gear icon

tree : Html msg

Tree icon

engine : Html msg

Tree icon

bot : Html msg

Tree icon

caretLeft : Html msg

Tree icon

magnifyingGlass : Html msg

MagnifyingGlass icon

close : Html msg

Close icon

edit : Html msg

Edit icon

questionMark : Html msg

QuestionMark icon

chart : Html msg

Tree icon

Misc

styles : List Snippet

Setup styles for the client

peterszerzo/elm-natural-ui/1.0.1

NaturalUi

UI elements

Attributes

Icons

Misc

Modules