Harmonium v0.1.0 Harmonium View Source

Styled HTML grid helpers, form helpers, and more.

Link to this section Summary

Functions

Renders a callout

Constructs a callout class

Renders a grid column. (Same usage as rev_row/1, rev_row/2, rev_row/3.)

Constructs a grid column class. (Same usage as row_class/1.)

Renders a menu

Constructs a menu class

Renders a rev-Menu-item

Constructs a menu item class

Same as select_stack/4, but renders the input as a <select multiple>

Constructs a CSS class with SUIT modifiers

Renders an input error <small>

Renders an input help <small>

Renders an input label

Constructs an input label class

Renders an input label inner <span>

Renders grid row

Constructs a grid row class, following the modifier rules of rev_class/2

Similar usage to text_input_stack/3, but it also passes value_options through to Phoenix.HTML.Form.select/4

Render a single checkbox

Harmonium provides a number of shortcuts for building richly-styled form inputs. We refer to these as “stacks.” A stack is a label wrapper around an input with optional label text, help text, and error display. Under the covers, these stack helpers uses the input helpers from Phoenix.HTML.Form

Link to this section Functions

Link to this function button_class(modifiers \\ []) View Source
Link to this function button_group(modifiers, list) View Source
Link to this function button_group_class(modifiers \\ []) View Source

Renders a callout.

Link to this function callout(modifiers, list) View Source
Link to this function callout(tag, modifiers, list) View Source
Link to this function callout_class(modifiers \\ []) View Source

Constructs a callout class.

Link to this function card(tag, modifiers, list) View Source
Link to this function card_body(modifiers, list) View Source
Link to this function card_body(tag, modifiers, list) View Source
Link to this function card_body_class(modifiers \\ []) View Source
Link to this function card_class(modifiers \\ []) View Source
Link to this function card_footer(modifiers, list) View Source
Link to this function card_footer(tag, modifiers, list) View Source
Link to this function card_header(modifiers, list) View Source
Link to this function card_header(tag, modifiers, list) View Source
Link to this function card_header_class(modifiers \\ []) View Source

Renders a grid column. (Same usage as rev_row/1, rev_row/2, rev_row/3.)

Link to this function col(tag, modifiers, list) View Source
Link to this function col_class(modifiers \\ []) View Source

Constructs a grid column class. (Same usage as row_class/1.)

Link to this function drawer(tag, modifiers, list) View Source
Link to this function drawer_class(modifiers \\ []) View Source
Link to this function drawer_closer_class(modifiers \\ []) View Source
Link to this function drawer_contents_class(modifiers \\ []) View Source
Link to this function drawer_expander_class(modifiers \\ []) View Source
Link to this function email_input_stack(f, key, options \\ []) View Source

See text_input_stack/3 for usage.

Link to this function file_input_stack(f, key, options \\ []) View Source

See text_input_stack/3 for usage.

Link to this function multiple_select_stack(f, key, value_options, options \\ []) View Source

Same as select_stack/4, but renders the input as a <select multiple>.

Link to this function number_input_stack(f, key, options \\ []) View Source

See text_input_stack/3 for usage.

Link to this function password_input_stack(f, key, options \\ []) View Source

See text_input_stack/3.

Link to this function rev_class(base_class, modifiers) View Source

Constructs a CSS class with SUIT modifiers.

With no modifiers, it simply returns the base_class.

iex> rev_class(:Column, [])
"Column"

For a boolean modifier {key, value}, it modifies the class with key only if value is true.

iex> rev_class(:Column, shrink: true)
"Column Column--shrink"
iex> rev_class(:Column, shrink: false)
"Column"

For a non-boolean modifier {key, value}, it concatenates key and value.

iex> rev_class(:Column, medium: 4, large: 3, justify: :Left)
"Column Column--medium4 Column--large3 Column--justifyLeft"

For the special-case {:class, value}, it skips SUIT conventions and adds value directly

iex> rev_class(:Column, medium: 4, class: "more css classes")
"Column Column--medium4 more css classes"

Renders an input error <small>.

Renders an input help <small>.

Link to this function rev_label(modifiers, list) View Source

Renders an input label.

Link to this function rev_label_class(modifiers \\ []) View Source

Constructs an input label class.

Renders an input label inner <span>.

Renders grid row.

iex> row(do: "hello") |> safe_to_string()
"<div class=\"rev-Row\">hello</div>"
iex> row(flex: true) do "hello" end |> safe_to_string()
"<div class=\"rev-Row rev-Row--flex\">hello</div>"
iex> row(:section, flex: true) do "hello" end |> safe_to_string()
"<section class=\"rev-Row rev-Row--flex\">hello</section>"
Link to this function row(tag, modifiers, list) View Source
Link to this function row_class(modifiers \\ []) View Source

Constructs a grid row class, following the modifier rules of rev_class/2.

iex> row_class()
"rev-Row"
iex> row_class(flex: true)
"rev-Row rev-Row--flex"
Link to this function select_stack(f, key, value_options, options \\ []) View Source

Similar usage to text_input_stack/3, but it also passes value_options through to Phoenix.HTML.Form.select/4.

Link to this function single_checkbox(f, key, options \\ []) View Source

Render a single checkbox.

iex> single_checkbox(f, :bool) |> safe_to_string()
"<label class=\"rev-InputLabel rev-Checkbox\"><input name=\"widget[bool]\" type=\"hidden\" value=\"false\"><input class=\"rev-Checkbox-input\" id=\"widget_bool\" name=\"widget[bool]\" type=\"checkbox\" value=\"true\"></label>"

You may optionally add a label:

iex> single_checkbox(f, :bool, label: "Publish?") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Checkbox\"><input name=\"widget[bool]\" type=\"hidden\" value=\"false\"><input class=\"rev-Checkbox-input\" id=\"widget_bool\" name=\"widget[bool]\" type=\"checkbox\" value=\"true\"><span class=\"rev-Checkbox-label\">Publish?</span></label>"
Link to this function single_radio_button(f, key, value, options \\ []) View Source

Render a single radio button.

iex> single_radio_button(f, :required_string, "one") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Radio\"><input class=\"rev-Radio-input\" id=\"widget_required_string_one\" name=\"widget[required_string]\" type=\"radio\" value=\"one\"></label>"

You may optionally add a label:

iex> single_radio_button(f, :required_string, "one", label: "Option One") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Radio\"><input class=\"rev-Radio-input\" id=\"widget_required_string_one\" name=\"widget[required_string]\" type=\"radio\" value=\"one\"><span class=\"rev-Radio-label\">Option One</span></label>"
Link to this function text_input_stack(f, key, options \\ []) View Source

Harmonium provides a number of shortcuts for building richly-styled form inputs. We refer to these as “stacks.” A stack is a label wrapper around an input with optional label text, help text, and error display. Under the covers, these stack helpers uses the input helpers from Phoenix.HTML.Form.

This particular function renders a text input stack.

iex> text_input_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

You may optionally add a label.

iex> text_input_stack(f, :required_string, label: "Required String") |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  <span class=\"rev-LabelText\">Required String</span>\n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

You may optionally add help.

iex> text_input_stack(f, :required_string, help: "This field is required.") |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  <small class=\"rev-HelpText rev-InputHelpText\">This field is required.</small>\n</label>"

The :input option passes another set of options through to the <input> field.

iex> text_input_stack(f, :required_string, input: [placeholder: "Required String"]) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" placeholder=\"Required String\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

When the field has an error, error styles are applied, and it is displayed.

iex> text_input_stack(form_with_errors, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack is-invalid\">  \n  <input class=\"rev-Input is-invalid\" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\">\n  <small class=\"rev-InputErrors\">can&#39;t be blank</small>\n  \n</label>"
Link to this function textarea_stack(f, key, options \\ []) View Source

See text_input_stack/3 for usage.