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