PackagesReroutesAboutlamdera.com

peterszerzo/elm-natural-ui/10.0.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

NaturalUi

Opinionated design system with a friendly API. Demo.

Nodes

authScreen : CustomNode Never Never msg

AuthScreen element

button : CustomNode Never Never msg

Button element

card : CustomNode Never Never msg

Card element

counter : CustomNode State Int msg

Counter element

datePicker : CustomNode State Data msg

DatePicker element

input : CustomNode Int String msg

Input element

checkbox : CustomNode Never (List String) msg

Checkbox element

loader : CustomNode Never Never msg

Loader element

listEditor : CustomNode State Data msg

List editor element

select : CustomNode Never (Maybe String) msg

Select element

formPack : CustomNode Never Never msg

FormPack element

tabs : CustomNode State (Data msg) msg

Tabs element

switch : CustomNode Never Bool msg

SearchBar element

toggle : CustomNode State Data msg

Toggle element

table : CustomNode State (Data msg) msg

Smart table

notification : CustomNode Never Never msg

Notification element

chipElement : CustomNode Never Never msg

Chip element

slider : CustomNode State Data msg

Slider element

tile : CustomNode Never Never msg

Tile element

Attributes

title : String -> Setting state data msg

Title attribute

body : String -> Setting state data msg

Content body attribute

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.

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.

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

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

searchable : Bool -> Setting state data msg

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

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