bh v0.0.4 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.

  • :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:

<%= 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>

Note, that all data- keys in the resulting HTML are dasharized.

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>