untangled.ui.elements — navis/untangled-ui 1.0.0-alpha7

first-node cljs

(first-node react-class sequence-of-react-instances)

Finds (and returns) the first child that is an instance of the given React class (or nil if not found).

react-instance? cljs

(react-instance? react-class react-instance)

Returns the react-instance (which is logically true) iff the given react instance is an instance of the given react class. Otherwise returns nil.

ui-avatar cljs

(ui-avatar {:keys [className color size kind] :as props :or {className ""}}
           child)

Render an icon or a short string within an avatar. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:color - :none (default), :primary, :accent :size - :regular (default), :medium, :large, :xlarge:, :huge :kind - :none (default), :bordered

ui-badge cljs

(ui-badge {:keys [className] :as props :or {className ""}} & children)

Render the given children within a badge. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

(ui-badge {} "7")

ui-button cljs

(ui-button {:keys [className size color shape disabled active]
            :or {className ""}
            :as props}
           &
           children)

Render a raised button. Props is a normal clj(s) map with React/HTML attributes plus:

:color - :neutral (default), :primary, :accent :shape - :rect (default), :round, or :wide :size - :normal (default), :small :active - true or false (default), Causes the button to look highlighted.

Any other React properties are allowed, including additional CSS classes.

ui-card cljs

(ui-card {:keys [kind title color size image image-position actions media-type
                 media menu className]
          :as attrs}
         &
         children)

Render a card component

:title - "Some Title" :color - :primary | :accent :kind - :bordered | :transparent | :square :size - :expand | :wide :image - "path/to/image/file.jpeg" :image-position - :cover | :top-left | :top-right | :bottom-left | :bottom-right :actions - (ui-button "Some Action") :media - URL :media-type - :image | :video (TODO Youtube?)

all paramters optional

ui-checkbox cljs

(ui-checkbox {:keys [id state checked className label] :as props})

Render a checkbox (not the label). Props is a normal clj(s) map with React/HTML attributes plus:

:className - additional class stylings to apply to the top level of the checkbox :id string - Unique DOM ID. Required for correct rendering. :checked - true, false, or :partial

ui-circular-button cljs

(ui-circular-button
  {:keys [className size color disabled active] :or {className ""} :as props}
  &
  children)

Render a raised circle button of fixed size (configurable in CSS variables, see CSS guide). Extra content will overflow out of the cirle. Props is a normal clj(s) map with React/HTML attributes plus:

:color - :neutral (default), :primary, :accent :size - :normal (default), :small :active - true or false (default), Causes the button to look highlighted.

Any other React properties are allowed, including additional CSS classes.

Note that you will typically only be able to fit something like an icon in this kind of button, which is a perfect circle.

ui-dialog cljs

Render a dialog. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

Options:

:visible - A boolean. When true the dialog is on-screen. When not, it is hidden. Allows you to keep the dialog in the DOM. :full-screen - A boolean. Renders the dialog to consume the entire screen when true. (useful for mobile). :modal - A boolean. When true the dialog will block the rest of the UI. :className - Additional CSS classes to place on the dialog. :key - React key :onClose - A callback that advises your code that the user is indicating a desire to be out of the dialog (e.g. the clicked on the modal backdrop). You must still set the visible flag since this is a stateless rendering of a dialog UI, not an active stateful component.

You should include at most one of each of three following children for this node:

(ui-dialog {} (ui-dialog-title {} title-nodes) (ui-dialog-body {} body-nodes) (ui-dialog-actions {} action-nodes)

The title-nodes can be any inline DOM (or just a string), as can body-nodes. Action-notes must include at least one button that closes the dialog or redirects the user.

ui-dialog-actions cljs

Render one or more action elements (e.g. buttons) in the action area of the dialog. Should only be used in a ui-dialog

ui-dialog-body cljs

Render the body of a dialog (using the supplied DOM children). Should only be used in a ui-dialog

ui-dialog-title cljs

Render a dialog's title (using supplied DOM children). Should only be used in a ui-dialog

ui-empty-state cljs

(ui-empty-state {:keys [className glyph title message]
                 :as props
                 :or {className "u-absolute--middle-center"
                      glyph :help
                      title "Nothing to see yet"
                      message ""}})

Render an icon and text for when you can't display anything when you normally would have a collection of things.

:glyph - An icon glyph name to render a given icon. :title - A string to announce what's missing :message - A string to instruct the user what to do next

ui-fader cljs

(ui-fader {:keys [inline? visible] :as props} & children)

Wrap children in a span where the :visible attribute is a boolean indicating the visibility of the children.

Props is a clj(s) map of normal React attributes.

:inline? - A boolean (default false). When true, emits a span, else div.

You can get this same effect using the u-fade-in and u-fade-out CSS classes. See the CSS Guide.

When the resulting span becomes visible it fades in, and when it becomes hidden it fades out.

ui-field cljs

(ui-field {:keys [id kind size state type label helper required action
                  actionEvent]
           :or {size ""}
           :as attrs}
          placeholder)

Render an input or textarea field. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:id string - Unique DOM ID. Required for correct rendering. :kind :single-line (default), :multi-line, :full-width :size :regular (default), :dense, :large :state :valid (default) or :invalid :label string - A title for the input to describe it. :helper string - Text that helps instruct the user under the input.

ui-flat-button cljs

(ui-flat-button {:keys [className size color shape disabled active]
                 :or {className ""}
                 :as attrs}
                &
                children)

Render a button that looks more like a link that a button (it is just the children), but renders the hover shape of a more traditional button when the mouse is over it.

:color - :neutral (default), :primary, :accent :shape - :rect (default), :round, or :wide. The shape when the mouse is over the button. :size - :normal (default), :small. Small buttons are a bit more condensed. :active - true or false (default). Causes the button to look highlighted.

Any normal HTML/React properties are allowed, including additional CSS classes.

ui-icon cljs

(ui-icon {:keys [className color size glyph] :as props :or {className ""}})

(ui-icon {:keys [className color size glyph] :as props :or {className ""}}
         child)

Render an icon. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:color :none (default), :active, :passive :size :regular (default), :small, :medium, :large, :xlarge, :huge :glyph - Instructs ui-icon to render an icon from the built-in set. See untangled.icons/icon.

The child (optional) should be some kind of icon, for example the SVG generated by the untangled.icons/icon function.

ui-icon-bar cljs

(ui-icon-bar
  {:keys [className orientation shifting] :as props :or {className ""}}
  &
  children)

Render an icon bar using a vector of icons (each a map of attributes). Can optionally render vertically and/or shifting. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:orientation :vertical or :horizontal (default) :shifting true or false (default)

TODO: Example, talk about children

all parameters are optional

ui-icon-bar-item cljs

(ui-icon-bar-item
  {:keys [className glyph label active] :as props :or {className "" label ""}})

Render an icon button for use inside an icon bar.

:glyph - An icon glyph name to render that given icon. :label - A string to label that icon. :active true or false (default) - Usually used to show that your in that action's view.

ui-icon-button cljs

(ui-icon-button {:keys [className glyph label] :as props :or {className ""}}
                &
                children)

Render a button with an icon inside. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:glyph - Instructs ui-icon to render an icon from the built-in set. See untangled.icons/icon. :label - Applies a label to the icon button that describes the action it provides to the user.

The child (optional) should be some kind of icon, for example the SVG generated by the untangled.icons/icon function.

ui-iframe cljs

(ui-iframe props child)

ui-label cljs

(ui-label {:keys [className color] :as props :or {className ""}} & children)

Render the given children within a label. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:color :none (default), :primary, :accent

ui-loader cljs

(ui-loader {:keys [className color] :as props :or {className ""}})

Render an icon or a short string within an avatar. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:color :none (default), :primary :accent

ui-message cljs

(ui-message {:keys [className color] :as props :or {className ""}} & children)

Render the given children within a message. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:color :none(default), :alert, :success, :warning, :informative

ui-notification cljs

Render a notification. Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

:onClose (optional) - A function to call when the notification's close button is pressed :type :none (default), :success, :warning, :error, :informative :size :normal (default), :wide

You should include two children of this node:

(when show-notification? (ui-notification {:onClose (fn [] (om/transact! this `[(my-close-notification-mutation)]))} (ui-notification-title {} title-nodes) (ui-notification-body {} body-nodes)))

The title-nodes can be any inline DOM (or just a string), as can body-nodes.

ui-notification-body cljs

Render a notification body. Should only be used in a ui-notification

ui-notification-title cljs

Render a notification title. Should only be used in a ui-notification

ui-progress cljs

(ui-progress {:keys [max value className size] :or {className ""} :as props})

Render an HTML progress element. Props is a normal clj(s) map with React/HTML attributes plus:

:className - additional class stylings to apply to the progress element :max - The integer value that we're targeting for completion :value - The integer value of where we're at :size :regular (default), :dense

If neither max or value are given, it will render as an indeterminate progress (in progress, but not complete).

ui-radio cljs

(ui-radio {:keys [className id] :as props})

Render a HTML radio (without the label). Props is a normal clj(s) map with React/HTML attributes plus:

:className - additional class stylings to apply to the top level of the checkbox :id - Required. A unique ID. Will not render correctly without one.

ui-slider cljs

(ui-slider {:keys [label id] :as props :or {label ""}})

Render an icon button for use inside an icon bar.

:label - A string of text to describe the value of this slider :id - Required. A unique ID. Will not render correctly without one.

TODO: Add the ability to wrap this in a menu so you can show more than just the text.

ui-switch cljs

(ui-switch {:keys [id state checked className disabled] :as props})

Render a checkbox (not the label). Props is a normal clj(s) map with React/HTML attributes plus:

:className - additional class stylings to apply to the top level of the checkbox :id string - Unique DOM ID. Required for correct rendering. :checked - true, false, or :partial

ui-tab cljs

(ui-tab
  {:keys [className label kind active] :as props :or {className "" label ""}})

Render an icon button for use inside an icon bar.

:label - A string of text to describe the tab action :kind :default, :primary - changes the aesthetic style of a tab :active true or false (default) - Usually used to show that your in that tab's view.

TODO: Add the ability to wrap this in a menu so you can show more than just the text.

ui-tabs cljs

(ui-tabs {:keys [className] :as props :or {className ""}} & children)

Render a container for tabs using a vector of icons (each a map of attributes). Normal HTML/React attributes can be included, and should be a cljs map (not a js object).

all parameters are optional

ui-toolbar cljs

(ui-toolbar {:keys [className kind raised] :as props :or {className ""}}
            &
            children)

Render a container for toolbar rows to populate

:kind :regular (default), :raised, :primary, :primary-raised, :dark, :dark-raised, :bordered :raised false (default), true - Visually raise the toolbar with a box shadow.

ui-toolbar-button cljs

(ui-toolbar-button {:keys [glyph] :as props :or {glyph :menu}})

Render a primary action button for a toolbar

:size :regular (default), :dense

ui-toolbar-row cljs

(ui-toolbar-row {:keys [className size] :as props :or {className ""}}
                &
                children)

Render a row of space to place controls and labels inside.

:size :regular (default), :dense

ui-toolbar-spacer cljs

(ui-toolbar-spacer {:keys [className] :as props :or {className ""}})

Render a spacer in-between elements in a toolbar

update-frame-content cljs

(update-frame-content this child)