Documentation for PhoenixMDBootstrapForm which provides helper methods for creating beautiful looking Material Design Bootstrap forms in Phoenix.

Installation

This package can be installed by adding rrpproxy to your list of dependencies in mix.exs:

def deps do
  [
    {:phoenix_mdbootstrap_form, "~> 0.1.2"}
  ]
end

You may also alias this module in web.ex, so it's shorter to type in templates.

alias PhoenixMDBootstrapForm, as: MDF

Usage

In order to change markup of form elements to bootstrap-style, all you need is to prefix regular methods you aleady have with PhoenixMDBootstrapForm, or MDF if you created an alias.

For example:

<%= form_for @changeset, "/", fn f -> %>
  <%= MDF.text_input f, :value %>
  <%= MDF.submit f %>
<% end %>

Becomes bootstrap-styled:

<form accept-charset="UTF-8" action="/" method="post">
  <div class="form-group row">
    <label class="col-form-label text-sm-right col-sm-2" for="record_value">
      Value
    </label>
    <div class="col-sm-10">
      <input class="form-control" id="record_value" name="record[value]" type="text">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 ml-auto">
      <button class="btn" type="submit">Submit</button>
    </div>
  </div>
</form>

This library generates horizonal form layout that collapses down on small screens.

You can always fall-back to default Phoenix.HTML.Form methods if bootstrapped ones are not good enough.

Currently this module supports following methods:

• text_input
• file_input
• email_input
• password_input
• textarea
• telephone_input
• number_input
• select
• time_select
• date_select
• datetime_select
• multi_select
• checkbox
• checkboxes
• radio_buttons
• submit
• static

For quick reference you can look at this template. You can mix phx.server inside demo folder to see this reference template rendered.

Labels

To set your own label you can do something like this:

<%= MDF.text_input f, :value, label: [text: "Custom"] %>

CSS Classes

To add your own css class to the input element / controls do this:

<%= MDF.text_input f, :value, input: [class: "custom"] %>

Help Text

You can add help text under the input. It could also be rendered template with links, tables, and whatever else.

<%= MDF.text_input f, :value, input: [help: "Help text"] %>

Prepending and Appending Inputs

<%= MDF.text_input f, :value, input: [prepend: "$", append: ".00"] %>

Radio Buttons

You don't need to do multiple calls to create list of radio buttons. One method will do them all:

<%= MDF.radio_buttons f, :value, ["red", "green"] %>

or with custom labels:

<%= MDF.radio_buttons f, :value, [{"R", "red"}, {"G", "green"}] %>

or rendered inline:

<%= MDF.radio_buttons f, :value, ["red", "green", "blue"], input: [inline: true] %>

Select

Works just like the standard select or multiple_select provided by Phoenix:

<%= MDF.select f, :value, ["red", "green", "blue"] %>

or use a multiple select field:

<%= MDF.multiple_select f, :value, ["red", "green", "blue"] %>

Checkboxes

Very similar to multiple_select in functionality, you can render collection of checkboxes. Other options are the same as for radio_buttons

<%= MDF.checkboxes f, :value, ["red", "green", "blue"], selected: ["green"] %>

Submit Buttons

Besides simple MDF.submit f you can define custom label and content that goes next to the button. For example:

<% cancel = link "Cancel", to: "/", class: "btn btn-link" %>
<%= MDF.submit f, "Smash", class: "btn-primary", alternative: cancel %>

Static Elements

When you need to render a piece of content in the context of your form. For example:

<%= MDF.static f, "Current Avatar", avatar_image_tag %>

Form Errors

If changeset is invalid, form elements will have .is-invalid class added and .invalid-feedback container will be appended with an error message.

In order to properly pull in i18n error messages specify translate_error function that handles it:

config :phoenix_mdbootstrap_form, [
  translate_error_function: &MyApp.ErrorHelpers.translate_error/1
]

Custom Grid and Label Alignment

By default .col-sm-2 and .col-sm-10 used for label and control colums respectively. You can change that by passing label_col and control_col with form_for like this:

<% opts = [label_col: "col-sm-4", control_col: "col-sm-8", label_align: "text-sm-left"] %>
<%= form_for @changeset, "/", opts, fn f -> %>

If you need to change it application-wide just edit your config.exs and play around with these:

config :phoenix_mdbootstrap_form,
  label_col_class:    "col-form-label col-sm-2",
  control_col_class:  "col-sm-10",
  label_align_class:  "text-sm-right",
  form_group_class:   "form-group row"

Credit

This repository has been forked from GBH's phoenix_bootstrap_form and i just adjusted it for Material Design Bootstrap.