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]
html_options[hash]<default: {}>
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:

action[string](use component stimulus-options method)
backdrop[symbol](:static)
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
effect[symbol](:fade)
position[symbol](:centered)
scrollable[boolean]
size[symbol](:lg, :md, :sm)(use component size method)
target[string](use component stimulus-options method)
turbo[string](use component turbo method)

Items

The allowed items for this component are:

body(inherit of component)
footer(inherit of component)
header(inherit of component)

Examples

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

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

<div class="modal-example modal" tabindex="-1" aria-labelledby="Modal title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><b>Modal title</b></h5>
        <button class="close" data-bs-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-danger btn">Close</button>
        <button class="btn-success btn">Save changes</button>
      </div>
    </div>
  </div>
</div>

Size

The size option has following symbols for argument:

Ruby
Html

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 modal" tabindex="-1" aria-labelledby="Sm Modal title" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Sm Modal title</h5>
        <button class="close" data-bs-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>

Backdrop static

Static Backdrop modal

Ruby
Html

ui_button_link 'Static Backdrop modal', { url: '#' }, { data: { "bs-toggle": 'modal', "bs-target": '#backdrop-modal' }}
ui_modal({ effect: :fade, backdrop: :static}, {id: "backdrop-modal"}) do |m|
  m.header do
    "Backdrop Modal title"
  end
  m.body do
    "One fine body"
  end
  m.footer do
    ui_button "Close", { status: :secondary }, data: { "bs-dismiss": "modal" }
    ui_button "Understood", status: :primary
  end
end

<a data-bs-toggle="modal" data-bs-target="#backdrop-modal" class="btn-secondary btn" role="button" href="#">Static Backdrop modal</a>

<div id="backdrop-modal" data-backdrop="static" data-keyboard="false" class="fade modal show" tabindex="-1" aria-labelledby="Backdrop Modal title
  " aria-modal="true" role="dialog" style="display: block; padding-right: 15px;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Backdrop Modal title</h5>
        <button class="close" data-bs-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 data-bs-dismiss="modal" class="btn-secondary btn">Close</button>
        <button class="btn-primary btn">Understood</button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

Modal must be inserted outside a card.

Scrollable modal

Ruby
Html

ui_button_link 'Scrollable modal', { url: '#' }, { data: { "bs-toggle": 'modal', "bs-target": '#scrollable-modal' }}
ui_modal({ scrollable: true }, {id: "backdrop-modal"}) do |m|
  m.header do
    "Scrollable Modal title"
  end
  m.body do
    "..."
  end
  m.footer do
    ui_button "Close", { status: :secondary }, data: { dismiss: "modal" }
    ui_button "Understood", status: :primary
  end
end

<a data-bs-toggle="modal" data-bs-target="#scrollable-modal" class="btn-secondary btn" role="button" href="#">Scrollable modal</a>

<div id="scrollable-modal" class="modal show" tabindex="-1" aria-labelledby="Scrollable Modal title" aria-modal="true" role="dialog" style="padding-right: 15px; display: block;">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Scrollable Modal title</h5>
        <button class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
      </div>
      <div class="modal-body">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>...</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer"><button data-bs-dismiss="modal" class="btn-secondary btn">Close</button>
        <button class="btn-primary btn">Understood</button>
      </div>
    </div>
  </div>
</div>

Position

Modal must be inserted outside a card.

Vertical centered modal

Ruby
Html

ui_button_link 'Vertical centered modal', { url: '#' }, { data: { "bs-toggle": 'modal', "bs-target": '#centered-modal' }}
ui_modal({ position: centered }, {id: "backdrop-modal"}) do |m|
  m.header do
    "Centered Modal title"
  end
  m.body do
    "One fine body"
  end
end

<a data-bs-toggle="modal" data-bs-target="#centered-modal" class="btn-secondary btn" role="button" href="#">Vertical centered modal</a>

<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Vertical Centered Modal title</h5>
      <button class="close" data-bs-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 data-bs-dismiss="modal" class="btn-secondary btn">Close</button>
      <button class="btn-primary btn">Understood</button>
    </div>
  </div>
</div>

fullscreen

Modal must be inserted outside a card.

fullscreen fullscreen below lg fullscreen below md fullscreen below sm

Ruby
Html

ui_button_link 'fullscreen', { url: '#' }, { data: { "bs-toggle": 'modal', "bs-target": '#modal-test1' }}
ui_modal class: "modal-example", size: :sm do |m|
  m.header do
    "Fullscreen title"
  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-bs-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

Ruby
Html

ui_button_link "click here", { url: "#" }, { data: { "bs-toggle": "modal", "bs-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-bs-toggle="modal" data-bs-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-bs-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>