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