bh v0.0.7 Bh.Bh4.Modal
Twitter Bootstrap 4 modal helpers for Phoenix.
Summary
Functions
Generates HTML markup for dialogs.
Options
:id
- id of the dialog. Default id is “myDialog”. In case of rendering multiple dialogs on the same page, be sure to pass different ids for each of them (or only the first one will be displayed when used). Keep in mind, that valid page should not have two same ids.:size
- size of the modal dialog. Supported sizes::small
,:large
. When size is not provided, dialog is rendered in standard size.:title
- title of the modal dialog. When provided, dialog will render title block with close icon. When:title
option provided, footer block with close button will not be rendered by default.
Examples
This snippet will generate dialog HTML markup with content block with provided text and footer block with “Close” button. This dialog will have default id - “myModal”.
<%= bh_dialog "Dialog content" %>
In order to give dialog a specific id (in case you have multiple dialogs on
one page), you have to pass an :id
option.
<%= bh_dialog "Dialog content", id: "myCustomId" %>
If you want to make dialog smaller or larger - you can pass :size
option.
<%= bh_dialog "Dialog content", id: "myCustomId", size: :large %>
This will render the title block with the close icon, provided title and given
content. Footer with the “Close” button as a redundant element will not be
rendered by default when :title
is provided.
<%= bh_dialog "Dialog content", title: "Dialog title" %>
If you need complex HTML markup to be used to display coplex text inside
modal window, you can give bh_dialog
function a block that will be taken
for content. Please, note that in such case you should not pass the first
string argument, but only the list of options.
<%= bh_modal title: "Modal title", size: :small do %>
<p>Some conteng goes here :) <b>Bold</b> and <i>italic</i> text.</p>
<% end %>