bh v0.0.7 Bh.Bh4.Button

Twitter Bootstrap 4 button helpers for Phoenix.

Summary

Functions

Generates complex button HTML markup

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

Functions

bh_button(text, opts \\ [])

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, :small. 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>
bh_button_outline(text, opts \\ [])

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>