peterszerzo / elm-natural-ui / NaturalUi

Opinionated design system with a friendly API. Demo.

Simple nodes

authScreen : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

AuthScreen element

sidebar : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Sidebar element

avatar : Internal.LowLevel.CustomNode Basics.Never (Avatar.Data msg) msg

Avatar element

layout : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Layout element

status : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Status element

urlBar : Internal.LowLevel.CustomNode Basics.Never String msg

Url bar element

button : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Button element

header : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Header element

footer : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Footer element

card : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Card element

pageHeader : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Page header element

input : Internal.LowLevel.CustomNode Basics.Int String msg

Input element

checkbox : Internal.LowLevel.CustomNode Basics.Never (List String) msg

Checkbox element

searchBar : Internal.LowLevel.CustomNode Basics.Never String msg

SearchBar element

form : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Form element

modal : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Modal element

loader : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Loader element

select : Internal.LowLevel.CustomNode Basics.Never (Maybe String) msg

Select element

link : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Link element

formPack : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

FormPack element

switch : Internal.LowLevel.CustomNode Basics.Never Basics.Bool msg

SearchBar element

notification : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Notification element

chipElement : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Chip element

customLink : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Counter element

tile : Internal.LowLevel.CustomNode Basics.Never Basics.Never msg

Tile element

Counter

counter : Internal.LowLevel.CustomNode Counter.State Basics.Int msg

Counter element


type alias CounterData =
Counter.Data

Counter data


type alias CounterState =
Counter.State

Counter state

initCounter : CounterState

Init counter state

DatePicker

datePicker : Internal.LowLevel.CustomNode DatePicker.State DatePicker.Data msg

DatePicker element


type alias DatePickerData =
DatePicker.Data

DatePicker data


type alias DatePickerState =
DatePicker.State

DatePicker state

initDatePicker : DatePickerState

Init DatePicker state

Slider

slider : Internal.LowLevel.CustomNode Slider.State Slider.Data msg

Slider element


type alias SliderData =
Slider.Data

Slider data


type alias SliderState =
Slider.State

Slider state

initSlider : SliderState

Init Slider state

Steps

steps : Internal.LowLevel.CustomNode Basics.Never Steps.Data msg

Card element


type alias StepsData =
Steps.Data

StepsData

Toggle

toggle : Internal.LowLevel.CustomNode Basics.Never String msg

Toggle element


type alias ToggleData =
Toggle.Data

ToggleData

Dropdown

dropdown : Internal.LowLevel.CustomNode Basics.Never Dropdown.Data msg

Dropdown element


type alias DropdownData =
Dropdown.Data

DropdownData

Tabs

tabs : Internal.LowLevel.CustomNode Tabs.State (Tabs.Data msg) msg

Tabs element


type alias TabsData msg =
Tabs.Data msg

Tabs data


type alias TabsState =
Tabs.State

Tabs state

initTabs : TabsState

Init Tabs state

Table

table : Internal.LowLevel.CustomNode Table.State (Table.Data record msg) msg

Smart table


type alias TableData record msg =
Table.Data record msg

Table data


type alias TableState =
Table.State

Table state

initTable : TableState

Init Table state

tableSearch : TableState -> Maybe String

Extract search from table state

setTableSearch : String -> TableState -> TableState

Set table search state

ListEditor

listEditor : Internal.LowLevel.CustomNode ListEditor.State ListEditor.Data msg

ListEditor element


type alias ListEditorData =
ListEditor.Data

ListEditor data


type alias ListEditorState =
ListEditor.State

ListEditor state

initListEditor : ListEditorState

Init ListEditor state

Attributes

title : String -> Internal.LowLevel.Setting state data msg

Title attribute

oversized : Internal.LowLevel.Setting state data msg

Oversized

body : String -> Internal.LowLevel.Setting state data msg

Content body attribute

popup : List (Html.Styled.Html msg) -> Internal.LowLevel.Setting state data msg

Popup attribute - specify children that go into a popup belonging to the element.

controls : List (Html.Styled.Html msg) -> Internal.LowLevel.Setting state data msg

Makes list editing components append new items in the reverse order

help : String -> Internal.LowLevel.Setting state data msg

Help text

state : state -> Internal.LowLevel.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 -> Internal.LowLevel.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.

toMsg : (data -> msg) -> Internal.LowLevel.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.

toClipboard : (String -> msg) -> Internal.LowLevel.Setting state data msg

Message handler for copying the contents of an input field to clipboard

toStatefulMsg : (state -> data -> msg) -> Internal.LowLevel.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.

toStatefulMsgWithFocus : (Maybe String -> state -> data -> msg) -> Internal.LowLevel.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.

toAsyncStatefulMsg : ((state -> data -> ( state, data )) -> msg) -> Internal.LowLevel.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.

success : Internal.LowLevel.Setting state data msg

Success theme

warning : Internal.LowLevel.Setting state data msg

Warning theme

onDarkBackground : Internal.LowLevel.Setting state data msg

Set theme to work on dark background

error : Internal.LowLevel.Setting state data msg

Error theme

enabled : Basics.Bool -> Internal.LowLevel.Setting state data msg

Enabled state

placeholder : String -> Internal.LowLevel.Setting state data msg

Placeholder

icon : Html.Styled.Html msg -> Internal.LowLevel.Setting state data msg

SVG icon

id : String -> Internal.LowLevel.Setting state data msg

Id

label : String -> Internal.LowLevel.Setting state data msg

Labels, used for forms and sections

onClick : msg -> Internal.LowLevel.Setting state data msg

Click handler

onClose : msg -> Internal.LowLevel.Setting state data msg

Close handler

onSuggestion : (String -> msg) -> Internal.LowLevel.Setting state data msg

Handler for when the user accepts a suggestion

suggestions : List String -> Internal.LowLevel.Setting state data msg

Suggestions for words that autocomplete should recognize

url : String -> Internal.LowLevel.Setting state data msg

Url for links and help sections

discrete : Internal.LowLevel.Setting state data msg

Discrete theme

options : List String -> Internal.LowLevel.Setting state data msg

List of options, e.g. for select

optionIcon : (String -> Html.Styled.Html msg) -> Internal.LowLevel.Setting state data msg

An optional icon for choices

loading : Basics.Bool -> Internal.LowLevel.Setting state data msg

Specifies whether the UI element is in a loading state

css : List Css.Style -> Internal.LowLevel.Setting state data msg

elm-css styles

type_ : String -> Internal.LowLevel.Setting state data msg

HTML type attribute for buttons and input fields.

required : Internal.LowLevel.Setting state data msg

Required

onFocus : msg -> Internal.LowLevel.Setting state data msg

Focus handler

onBlur : msg -> Internal.LowLevel.Setting state data msg

Blur handler

onSubmit : msg -> Internal.LowLevel.Setting state data msg

Submit handler

onListEditorWordClick : (Basics.Int -> Basics.Int -> msg) -> Internal.LowLevel.Setting state data msg

Click handler on a word in a list editor

searchable : Basics.Bool -> Internal.LowLevel.Setting state data msg

Set searchability, toggling the search bar displays in e.g. tables

appendReverse : Internal.LowLevel.Setting state data msg

Makes list editing components append new items in the reverse order

keepAtLeastOne : Internal.LowLevel.Setting state data msg

Keep at least one item when editing

currentPath : String -> Internal.LowLevel.Setting state data msg

The current path

links : List { path : String, label : String, icon : Maybe (Html.Styled.Html msg) } -> Internal.LowLevel.Setting state data msg

Links

Icons

plus : Html.Styled.Html msg

Plus icon

plusInCircle : Html.Styled.Html msg

PlusInCircle icon

barbell : Html.Styled.Html msg

Barbell icon

webhook : Html.Styled.Html msg

Webhooks icon

checkmarkInCircle : Html.Styled.Html msg

Checkmark icon

variable : Html.Styled.Html msg

Variable icon

slot : Html.Styled.Html msg

Slot icon

duplicate : Html.Styled.Html msg

Duplicate icon

trash : Html.Styled.Html msg

Trash icon

target : Html.Styled.Html msg

Target icon

channels : Html.Styled.Html msg

Channels icon

pen : Html.Styled.Html msg

Pen icon

gear : Html.Styled.Html msg

Gear icon

tree : Html.Styled.Html msg

Tree icon

chip : Html.Styled.Html msg

Chip icon

bot : Html.Styled.Html msg

Tree icon

chevronLeft : Html.Styled.Html msg

ChevronLeft icon

chevronRight : Html.Styled.Html msg

ChevronRight icon

chevronUp : Html.Styled.Html msg

ChevronUp icon

chevronDown : Html.Styled.Html msg

ChevronDown icon

search : Html.Styled.Html msg

Search icon

close : Html.Styled.Html msg

Close icon

questionInCircle : Html.Styled.Html msg

QuestionInCircle icon

chart : Html.Styled.Html msg

Chart icon

logout : Html.Styled.Html msg

Logout icon

person : Html.Styled.Html msg

Person icon

hammer : Html.Styled.Html msg

Hammer icon

slack : Html.Styled.Html msg

Slack icon

skype : Html.Styled.Html msg

Skype icon

facebookMessenger : Html.Styled.Html msg

Facebook messenger icon

amazonEcho : Html.Styled.Html msg

Facebook messenger icon

Styles

globalStyles : Html.Styled.Html msg

Global setup styles