PackagesReroutesAboutlamdera.com

peterszerzo/elm-natural-ui/4.5.1

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

NaturalUi

Opinionated design system with a friendly API. Demo.

UI elements

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

AuthScreen element

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

AppLayout element

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

Button element

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

Card element

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

Input element

checkbox : List (Setting {} (List String) msg) -> Html msg

Checkbox element

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

Loader element

select : List (Setting {} String msg) -> Html msg

Select element

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

Bar chart element

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

Line chart 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

DEPRECATED smart table element (see smartTable2)

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

Smart table

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

Notification element

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

Chip element

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

Slider element

Attributes

title : String -> Setting state data msg

Title attribute

body : String -> Setting state data msg

Content body attribute

addNewItemLabel : String -> Setting state data msg

Label for an 'add new item' prompt

help : String -> Setting state data msg

Help text

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

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

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

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

Html attributes for the main input field inside the element. Useful to set attributes such as focus/blur handlers.

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

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

Misc

styles : List Snippet

Setup styles for the client

Modules

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