bh v0.0.16 Bh.Bh4.Button View Source

Twitter Bootstrap 4 button helpers for Phoenix.

Examples

Real live examples can be found on the site of the Project.

Link to this section Summary

Functions

Generates complex button HTML markup.

Generates complex outline button HTML markup. Accepts the same options as bh_button/2

Link to this section Functions

Generates complex button HTML markup.

Options

  • :context - context of the button. Allowed values are :primary, :secondary, :success, :info, :warning, :danger, :link. Default context is :primary.

  • :id - id of the button.

  • :size - size of the button. Supported sizes: :large (alias :lg), :small (alias :sm). By default the :size is not set (standard button size).

  • :layout - layout of the button. Allowed :layout value is :block. By default :layout value is not set (renders standard button layout).

  • :class - extra class, appended to the button classes. Option :class can take string of space-separated class names or symbol.

  • :data - data attributes list.

Examples

<%= bh_button "Button" %>
<button class="btn btn-primary" type="button">Button</button>

<%= bh_button "Button", size: :large, layout: :block, id: "my_id" %>
<button class="btn btn-primary btn-lg btn-block" id="my_id" type="button">Button</button>

<%= bh_button "Button", context: :danger, class: "something special" %>
<button class="btn btn-danger something special" type="button">Button</button>

With data-attributes (note, that all data- keys in the resulting HTML are dasharized):

<%= bh_button "Button", data: [val: "value", other_val: "other_value"] %>
<button class="btn btn-primary" data-other-val="other_value" data-val="value" type="button">Button</button>

Instead of a simple text you can pass complex markup as a block:

<%= bh_button context: :success, id: "my_id" do %>
  <span><b>Bold</b> and <i>italics</i> in button text</span>
<% end %>
<button class="btn btn-success" id="my_id" type="button"><span><b>Bold</b> and <i>italics</i> in button text</span></button>
Link to this function

bh_button_outline(text, opts \\ [])

View Source

Generates complex outline button HTML markup. Accepts the same options as bh_button/2

Examples

<%= bh_button_outline "Button" %>
<button class="btn btn-primary-outline" type="button">Button</button>

<%= bh_button_outline "Button", context: :success %>
<button class="btn btn-success-outline" type="button">Button</button>

<%= bh_button_outline data: [val: "value", other_val: "other_value"] do %>
  <span><strong>Bold</strong> and <em>italic</em> text</span>
<% end %>
<button class="btn btn-primary-outline" data-other-val="other_value" data-val="value" type="button"><span><strong>Bold</strong> and <em>italic</em> text</span></button>