Harmonium v1.0.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 an email input stack

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> and submits the list of all selected options

Renders a number input stack

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

Renders a textarea stack

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

Renders an email 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>"

See text_input_stack/3 for more options.

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> and submits the list of all selected options.

iex> multiple_select_stack(f, :required_string, [“Hi”: “hi”, “Hello”: “hello”]) |> safe_to_string() “

See text_input_stack/3 for more options.

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

Renders a number 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>"

See text_input_stack/3 for more options.

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.

iex> select_stack(f, :required_string, [“Hi”: “hi”, “Hello”: “hello”]) |> safe_to_string() “

See text_input_stack/3 for more options.

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

Renders a textarea stack.

iex> textarea_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-TextareaStack \">  \n  <textarea class=\"rev-Textarea \" id=\"widget_required_string\" name=\"widget[required_string]\">\nhello</textarea>\n  \n  \n</label>"

See text_input_stack/3 for more options.