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
Render a single radio button
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
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.
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.
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.
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.
See text_input_stack/3
.
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>
.
Renders an input label.
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>"
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"
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.
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>"
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>"
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't be blank</small>\n \n</label>"
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.