Harmonium v2.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 an icon tag
Outputs CSS class names for an icon
Renders a menu
Constructs a menu class
Renders a rev-Menu-item
Constructs a menu item class
Utility function for mocking forms when you do not yet have the underlying data structure
With mock_form/2
, rather than getting default inputs, you supply your own.
Much the same as mock_form/1
and mock_form_input/4
, the *_with_error
inputs have attached errors
Utility function for mocking a form input.
It adds two inputs: 1) :key
, and 2) :key_with_error
(which will have an attached error)
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
Renders a phone 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.
Renders an icon tag.
iex> icon("up-arrow") |> safe_to_string()
"<span class=\"rev-Icon rev-Icon--up-arrow\"></span>"
You can override the tag type.
iex> icon(:i, "up-arrow") |> safe_to_string()
"<i class=\"rev-Icon rev-Icon--up-arrow\"></i>"
You can add additional classes and pass other attributes to the tag.
iex> icon("up-arrow", class: "ExtraClass", title: "An Icon") |> safe_to_string()
"<span class=\"rev-Icon rev-Icon--up-arrow ExtraClass\" title=\"An Icon\"></span>"
You can do all of these things at once.
iex> icon(:i, "up-arrow", class: "ExtraClass", title: "An Icon") |> safe_to_string()
"<i class=\"rev-Icon rev-Icon--up-arrow ExtraClass\" title=\"An Icon\"></i>"
Outputs CSS class names for an icon.
iex> icon_class(:star)
"rev-Icon rev-Icon--star"
iex> icon_class("star-hollow")
"rev-Icon rev-Icon--star-hollow"
Utility function for mocking forms when you do not yet have the underlying data structure.
<%= mock_form fn f -> %>
<%= row do %>
<%= col do text_input_stack f, :string end %>
<%= col do text_input_stack f, :string, label: "Hello Label" end %>
<%= col do text_input_stack f, :string, label: "Hello Label", help: "This is help text." end %>
<%= col do text_input_stack f, :string_with_error end %>
<%= col do text_input_stack f, :string_with_error, help: "Help text and errors stack." end %>
<%= col do text_input_stack f, :nil, input: [placeholder: "Empty placeholder"] end %>
<% end %>
<% end %>
With mock_form/1
, you get a default set of inputs to work with:
iex> mock_form(fn f -> Map.keys(f.data) end)
[
:boolean,
:boolean_with_error,
:datetime,
:datetime_with_error,
:empty,
:empty_with_error,
:float,
:float_with_error,
:int,
:int_with_error,
:string,
:string_with_error
]
As you might expect, the *_with_error
inputs will have errors attached to them.
iex> mock_form(fn f -> Keyword.keys(f.errors) end)
[
:string_with_error,
:int_with_error,
:float_with_error,
:empty_with_error,
:datetime_with_error,
:boolean_with_error
]
With mock_form/2
, rather than getting default inputs, you supply your own.
Much the same as mock_form/1
and mock_form_input/4
, the *_with_error
inputs have attached errors.
iex> mock_form(%{foo: "foo value", bar: "bar value"}, &(&1))
%Phoenix.HTML.Form{
data: %{
bar: "bar value",
bar_with_error: "bar value",
foo: "foo value",
foo_with_error: "foo value"
},
errors: [
foo_with_error: "There was an error.",
bar_with_error: "There was an error."
],
hidden: [],
id: "mock",
impl: nil,
index: nil,
name: "mock",
options: [],
params: %{},
source: nil
}
Utility function for mocking a form input.
It adds two inputs: 1) :key
, and 2) :key_with_error
(which will have an attached error)
iex> f = %Phoenix.HTML.Form{data: %{}, errors: []}
iex> mocked = mock_form_input(f, :foo, "foo value", "oops")
iex> mocked.data
%{foo: "foo value", foo_with_error: "foo value"}
iex> mocked.errors
[foo_with_error: "oops"]
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”], label: “Greetings”, input: [required: true]) |> 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
.
Renders a phone input stack.
iex> phone_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=\"tel\" value=\"hello\">\n \n \n</label>"
See text_input_stack/3
for more options.
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.