Getting Started
Components

Modal

Description

Create dynamic overlays that display content or prompts within a website.

FREE
This component is available for free. It implements the Bootstrap Modal component. See the installation instructions below for more details.

Arguments

Name Default Type Description
size String Specify the modal size
Options: xl, lg, sm
fade true Boolean Use fade animation in open
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::ModalComponent.new(class: "position-static d-block show") do |modal| %>
  <% modal.with_header do %>
    <h5 class="modal-title">Modal title</h5>
  <% end %>
  <% modal.with_body do %>
    <p>Modal body text goes here.</p>
  <% end %>
  <% modal.with_footer do %>
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  <% end %>
<% end %>

<div class="modal fade position-static d-block show" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
      </div>
      <div class="modal-body">    
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Launch 

<div style="height: 400px;">
  <!-- Button trigger modal -->
  <%= render Railsboot::ButtonComponent.new(data: {bs_toggle: "modal", bs_target: "#exampleModal"}) do %>
    Launch demo modal
  <% end %>

  <!-- Modal -->
  <%= render Railsboot::ModalComponent.new(id: "exampleModal") do |modal| %>
    <% modal.with_header do %>
      <h1 class="modal-title fs-5">Modal title</h1>
    <% end %>
    <% modal.with_body do %>
      <p>Woo-hoo, you're reading this text in a modal!</p>
    <% end %>
    <% modal.with_footer do %>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    <% end %>
  <% end %>
</div>

<div style="height: 400px;">
  <!-- Button trigger modal -->
  <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div id="exampleModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Modal title</h1>
          <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
        </div>
        <div class="modal-body">      
          <p>Woo-hoo, you're reading this text in a modal!</p>
        </div>
        <div class="modal-footer">      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Sizes 

<div style="height: 400px;">
  <div class="d-flex flex-wrap gap-3">
    <!-- Button trigger modal -->
    <%= render Railsboot::ButtonComponent.new(data: {bs_toggle: "modal", bs_target: "#xlModal"}) do %>
      Extra Large Modal
    <% end %>

    <%= render Railsboot::ButtonComponent.new(data: {bs_toggle: "modal", bs_target: "#lgModal"}) do %>
      Large Modal
    <% end %>

    <%= render Railsboot::ButtonComponent.new(data: {bs_toggle: "modal", bs_target: "#defaultModal"}) do %>
      Default Modal
    <% end %>

    <%= render Railsboot::ButtonComponent.new(data: {bs_toggle: "modal", bs_target: "#smModal"}) do %>
      Small Modal
    <% end %>
  </div>

  <!-- XL Modal -->
  <%= render Railsboot::ModalComponent.new(size: "xl", id: "xlModal") do |modal| %>
    <% modal.with_header do %>
      <h1 class="modal-title fs-5">Extra large Modal</h1>
    <% end %>
    <% modal.with_body do %>
      <p>...</p>
    <% end %>
  <% end %>

  <!-- LG Modal -->
  <%= render Railsboot::ModalComponent.new(size: "lg", id: "lgModal") do |modal| %>
    <% modal.with_header do %>
      <h1 class="modal-title fs-5">Large Modal</h1>
    <% end %>
    <% modal.with_body do %>
      <p>...</p>
    <% end %>
  <% end %>

  <!-- Default Modal -->
  <%= render Railsboot::ModalComponent.new(id: "defaultModal") do |modal| %>
    <% modal.with_header do %>
      <h1 class="modal-title fs-5">Default Modal</h1>
    <% end %>
    <% modal.with_body do %>
      <p>...</p>
    <% end %>
  <% end %>

  <!-- Small Modal -->
  <%= render Railsboot::ModalComponent.new(size: "sm", id: "smModal") do |modal| %>
    <% modal.with_header do %>
      <h1 class="modal-title fs-5">Small Modal</h1>
    <% end %>
    <% modal.with_body do %>
      <p>...</p>
    <% end %>
  <% end %>
</div>

<div style="height: 400px;">
  <div class="d-flex flex-wrap gap-3">
    <!-- Button trigger modal -->
    <button type="button" data-bs-toggle="modal" data-bs-target="#xlModal" class="btn btn-primary">
      Extra Large Modal
    </button>
    <button type="button" data-bs-toggle="modal" data-bs-target="#lgModal" class="btn btn-primary">
      Large Modal
    </button>
    <button type="button" data-bs-toggle="modal" data-bs-target="#defaultModal" class="btn btn-primary">
      Default Modal
    </button>
    <button type="button" data-bs-toggle="modal" data-bs-target="#smModal" class="btn btn-primary">
      Small Modal
    </button>
  </div>
  <!-- XL Modal -->
  <div id="xlModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Extra large Modal</h1>
          <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
        </div>
        <div class="modal-body">      
          <p>...</p>
        </div>
      </div>
    </div>
  </div>
  <!-- LG Modal -->
  <div id="lgModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Large Modal</h1>
          <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
        </div>
        <div class="modal-body">      
          <p>...</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Default Modal -->
  <div id="defaultModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Default Modal</h1>
          <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
        </div>
        <div class="modal-body">      
          <p>...</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Small Modal -->
  <div id="smModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Small Modal</h1>
          <button data-bs-dismiss="modal" class="btn-close" aria-label="Close" type="button"></button>
        </div>
        <div class="modal-body">      
          <p>...</p>
        </div>
      </div>
    </div>
  </div>
</div>

Slots

header Railsboot::Modal::HeaderComponent

The header of the modal

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
body Railsboot::Modal::BodyComponent

The body of the modal

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
footer Railsboot::Modal::FooterComponent

The footer of the modal

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/modal_component.rb).
  • A view template (app/components/railsboot/modal_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/modal_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

List Group Nav