Modal(ui_modal)

UiBibz::Ui::Core::Windows::Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

ui_modal options, html_options do |m|
  # by variable
  m.header content, options, html_options
  # or by block
  m.header options, html_options do
    content
  end

  # by variable
  m.body content, options, html_options
  # or by block
  m.body options, html_options do
    content
  end

  # by variable
  m.footer content, options, html_options
  # or by block
  m.footer options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • effect[symbol](:fade)
  • size[symbol](:lg, :md, :sm)(use component size method)
  • tap[boolean]Required (if you want add header, body or footer item.)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Items

The allowed items for this component are:

Examples

Some examples explain how to use the options present in the component.

Modal

Modal title
One fine body
ui_modal class: "modal-example" do |m|
  m.header "Modal itle"
  m.body "One fine body"
  m.footer do
    button "Close", status: :secondary
    button "Save changes"
  end
end

<div class="modal-example ui_modal">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
      </div>
      <div class="modal-body">One fine body</div>
      <div class="modal-footer">
        <button class="btn-secondary btn">Close</button>
        <button class="btn-primary btn">Save changes</button>
      </div>
    </div>
  </div>
</div>

Size

Modal title
One fine body
Modal title
One fine body
Modal title
One fine body 
ui_modal class: "modal-example", size: :sm do |m|
  m.header do
    "Modal itle"
  end
  m.body do
    "One fine body"
  end
end

<div class="modal-example ui_modal">
  <div class="modal-dialog ui_modal-sm" role="document">
    <div class="modal-content"><div class="modal-header">
      <h5 class="modal-title">Modal title</h5>
      <button class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
      </button>
    </div>
    <div class="modal-body">One fine body</div>
    </div>
  </div>
</div>

Effect

click here 
ui_button_link "click here", { url: "#" }, { data: { toggle: "modal", target: "#modal-test" }}
ui_modal({ effect: :fade }, { id: "modal-test" }) do |m|
  m.header do
    "Modal itle"
  end
  m.body do
    "One fine body"
  end
end

<a data-toggle="modal" data-target="#modal-test" class="btn-primary btn" href="#">click here</a>
<div id="modal-test" class="fade ui_modal" style="display: none;">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
      </div>
      <div class="modal-body">One fine body</div>
    </div>
  </div>
</div>

Contents