PackagesReroutesAboutlamdera.com

peterszerzo/elm-natural-ui/13.1.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

NaturalUi

Opinionated design system with a friendly API. Demo.

Simple nodes

authScreen : CustomNode Never Never msg

AuthScreen element

avatar : CustomNode Never (Data msg) msg

Avatar element

layout : CustomNode Never Never msg

Layout element

status : CustomNode Never Never msg

Status element

urlBar : CustomNode Never String msg

Url bar element

button : CustomNode Never Never msg

Button element

card : CustomNode Never Never msg

Card element

input : CustomNode Int String msg

Input element

checkbox : CustomNode Never (List String) msg

Checkbox element

form : CustomNode Never Never msg

Form element

loader : CustomNode Never Never msg

Loader element

select : CustomNode Never (Maybe String) msg

Select element

formPack : CustomNode Never Never msg

FormPack element

switch : CustomNode Never Bool msg

SearchBar element

notification : CustomNode Never Never msg

Notification element

chipElement : CustomNode Never Never msg

Chip element

tile : CustomNode Never Never msg

Tile element

Counter

counter : CustomNode State Int msg

Counter element

type alias CounterData =
Data

Counter data

type alias CounterState =
State

Counter state

initCounter : CounterState

Init counter state

DatePicker

datePicker : CustomNode State Data msg

DatePicker element

type alias DatePickerData =
Data

DatePicker data

type alias DatePickerState =
State

DatePicker state

initDatePicker : DatePickerState

Init DatePicker state

Slider

slider : CustomNode State Data msg

Slider element

type alias SliderData =
Data

Slider data

type alias SliderState =
State

Slider state

initSlider : SliderState

Init Slider state

Steps

steps : CustomNode Never Data msg

Card element

type alias StepsData =
Data

StepsData

Toggle

toggle : CustomNode Never Data msg

Toggle element

type alias ToggleData =
Data

ToggleData

Dropdown

Tabs

tabs : CustomNode State (Data msg) msg

Tabs element

type alias TabsData msg =
Data msg

Tabs data

type alias TabsState =
State

Tabs state

initTabs : TabsState

Init Tabs state

Table

table : CustomNode State (Data msg) msg

Smart table

type alias TableData msg =
Data msg

Table data

type alias TableState =
State

Table state

initTable : TableState

Init Table state

ListEditor

listEditor : CustomNode State Data msg

ListEditor element

type alias ListEditorData =
Data

ListEditor data

type alias ListEditorState =
State

ListEditor state

initListEditor : ListEditorState

Init ListEditor state

Attributes

title : String -> Setting state data msg

Title attribute

body : String -> Setting state data msg

Content body attribute

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

Makes list editing components append new items in the reverse order

help : String -> Setting state data msg

Help text

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.

toMsg : (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.

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

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

toStatefulMsg : (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.

toStatefulMsgWithFocus : (Maybe String -> 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.

toAsyncStatefulMsg : ((state -> data -> ( 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.

success : Setting state data msg

Success theme

warning : Setting state data msg

Warning theme

onDarkBackground : Setting state data msg

Set theme to work on dark background

error : Setting state data msg

Error theme

enabled : Bool -> Setting state data msg

Enabled state

placeholder : String -> Setting state data msg

Placeholder

icon : Html msg -> Setting state data msg

SVG icon

id : String -> Setting state data msg

Id

label : String -> Setting state data msg

Labels, used for forms and sections

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

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

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

Client-side navigation message without persistance in history, taking a path string as a parameter

onClick : msg -> Setting state data msg

Click handler

onClose : msg -> Setting state data msg

Close handler

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

Handler for when the user accepts a suggestion

suggestions : List String -> Setting state data msg

Suggestions for words that autocomplete should recognize

url : String -> Setting state data msg

Url for links and help sections

discrete : Setting state data msg

Discrete theme

options : List String -> Setting state data msg

List of options, e.g. for select

loading : Bool -> Setting state data msg

Specifies whether the UI element is in a loading state

css : List Style -> Setting state data msg

elm-css styles

type_ : String -> Setting state data msg

HTML type attribute for buttons and input fields.

required : Setting state data msg

Required

onFocus : msg -> Setting state data msg

Focus handler

onBlur : msg -> Setting state data msg

Blur handler

onSubmit : msg -> Setting state data msg

Submit handler

onListEditorWordClick : (Int -> Int -> msg) -> Setting state data msg

Click handler on a word in a list editor

searchable : Bool -> Setting state data msg

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

appendReverse : Setting state data msg

Makes list editing components append new items in the reverse order

currentPath : String -> Setting state data msg

The current path

Icons

plus : Html msg

Plus icon

plusInCircle : Html msg

PlusInCircle icon

barbell : Html msg

Barbell icon

webhook : Html msg

Webhooks icon

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

chip : Html msg

Chip icon

bot : Html msg

Tree icon

caretLeft : Html msg

Caret left icon - DEPRECATED, use chevronLeft

chevronLeft : Html msg

ChevronLeft icon

chevronRight : Html msg

ChevronRight icon

chevronUp : Html msg

ChevronUp icon

chevronDown : Html msg

ChevronDown icon

close : Html msg

Close icon

pen : Html msg

Pen icon

questionInCircle : Html msg

QuestionInCircle icon

chart : Html msg

Chart icon

logout : Html msg

Logout icon

person : Html msg

Person icon

hammer : Html msg

Hammer icon

slack : Html msg

Slack icon

skype : Html msg

Skype icon

Facebook messenger icon

amazonEcho : Html msg

Facebook messenger icon

Styles

globalStyles : Html msg

Global setup styles

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera