Module: Bootstrap4Helper

Defined in:: lib/bootstrap4_helper.rb,
lib/bootstrap4_helper/nav.rb,
lib/bootstrap4_helper/tab.rb,
lib/bootstrap4_helper/card.rb,
lib/bootstrap4_helper/alert.rb,
lib/bootstrap4_helper/badge.rb,
lib/bootstrap4_helper/modal.rb,
lib/bootstrap4_helper/railtie.rb,
lib/bootstrap4_helper/spinner.rb,
lib/bootstrap4_helper/version.rb,
lib/bootstrap4_helper/dropdown.rb,
lib/bootstrap4_helper/accordion.rb,
lib/bootstrap4_helper/card_deck.rb,
lib/bootstrap4_helper/component.rb,
lib/bootstrap4_helper/constants.rb,
lib/bootstrap4_helper/card_group.rb,
lib/bootstrap4_helper/initialize.rb,
lib/bootstrap4_helper/card_column.rb,
lib/bootstrap4_helper/input_group.rb,
lib/bootstrap4_helper/page_header.rb,
lib/bootstrap4_helper/tab/content.rb,
lib/bootstrap4_helper/card_grouping.rb,
lib/bootstrap4_helper/configuration.rb,
lib/bootstrap4_helper/dropdown/menu.rb,
lib/bootstrap4_helper/accordion_group.rb

Overview

This is the module that will get included in your partials.

Defined Under Namespace

Classes: Accordion, AccordionGroup, Alert, Badge, Card, CardColumn, CardDeck, CardGroup, CardGrouping, Component, Configuration, Constants, Dropdown, InputGroup, Modal, Nav, PageHeader, Railtie, Spinner, Tab

Constant Summary collapse

VERSION =

'1.2.3'.freeze

Class Method Summary collapse

.config {|@_bs4h_config| ... } ⇒ Bootstrap4Helper::Configuration

Simple interface for exposing the configuration object.

Instance Method Summary collapse

#accordion_group_helper(*args, &block) ⇒ Accordion

Creates a group of Accordions that stay in sync with each other.
#accordion_helper(opts = {}, &block) ⇒ Accordion

Creates a single Accordion element.
#alert_helper(*args, &block) ⇒ String

Creates an Alert component.
#badge_helper(*args, &block) ⇒ String

Creates a badge component.
#card_column_helper(opts = {}, &block) ⇒ String

Builds a card column.
#card_deck_helper(opts = {}, &block) ⇒ String

Builds a card deck.
#card_group_helper(opts = {}, &block) ⇒ String

Builds a card group.
#card_helper(opts = {}, &block) ⇒ String

Creates a Card component.
#dropdown_helper(*args, &block) ⇒ String

Generates a Dropdown component.
#input_group_helper(type = :prepend, opts = {}, &block) ⇒ String

Generates a input group component.
#modal_helper(opts = {}, &block) ⇒ String

Generates Modal windows.
#nav_helper(opts = {}, &block) ⇒ String

Generates Nav components.
#page_header_helper(opts = {}, &block) ⇒ String

Generates a page header, similiar to bootstrap 3.
#spinner_helper(*args, &block) ⇒ String

Generates spinner annimations.
#tab_helper(*args, &block) ⇒ String

Generates a Tab component.

Class Method Details

.config {|@_bs4h_config| ... } ⇒ `Bootstrap4Helper::Configuration`

Simple interface for exposing the configuration object.

Yields:

(@_bs4h_config)

# File 'lib/bootstrap4_helper/initialize.rb', line 13

def config
  yield @_bs4h_config if block_given?

  @_bs4h_config
end

Instance Method Details

#accordion_group_helper(*args, &block) ⇒ `Accordion`

Creates a group of Accordions that stay in sync with each other. One opens, the other closes.

“‘erb

<%= accordion_group_helper do |grp| %>
  <%= grp.accordion do |a| %>
    <%= a.header class: 'text-white bg-primary' do %>
      // Some HTML or Ruby
    <% end %>
    <%= a.body %>
      // Some HTML or Ruby
    <% end %>
  <% end %>

  <%= grp.accordion do |a| %>
    <%= a.header class: 'text-white bg-danger' do %>
      // Some HTML or Ruby
    <% end %>
    <%= a.body %>
      // Some HTML or Ruby
    <% end %>
  <% end %>
<% end $>

“‘



66
67
68

# File 'lib/bootstrap4_helper.rb', line 66

def accordion_group_helper(*args, &block)
  AccordionGroup.new(self, *args, &block)
end

#accordion_helper(opts = {}, &block) ⇒ `Accordion`

Creates a single Accordion element. The header component already provides the DOM element to link the Collapse area. You just need to provide the text or additional markup, if you want it.

“‘erb

<%= accordion_helper do |a| %>
  <%= a.header do %>
    // Some HTML or Ruby
  <% end %>
  <%= a.body %>
    // Some HTML or Ruby
  <% end %>
<% end %>

“‘



34
35
36

# File 'lib/bootstrap4_helper.rb', line 34

def accordion_helper(opts = {}, &block)
  Accordion.new(self, opts, &block)
end

#alert_helper(*args, &block) ⇒ `String`

Creates an Alert component.

“‘erb

<%= alert_helper :danger, dismissble: true do %>
  Something went wrong with your model data...
<% end %>

“‘



81
82
83

# File 'lib/bootstrap4_helper.rb', line 81

def alert_helper(*args, &block)
  Alert.new(self, *args, &block)
end

#badge_helper(*args, &block) ⇒ `String`

Creates a badge component. Badges have a context variable. Providing nothing will give you the ‘secondary` context.

“‘erb

<li>
  Messages: <%= badge_helper(:primary) { @messages.count } %>
</li>
<li>
  Notifications: <%= badge_healper { @notifications.count } %>
</li>

“‘



100
101
102

# File 'lib/bootstrap4_helper.rb', line 100

def badge_helper(*args, &block)
  Badge.new(self, *args, &block)
end

#card_column_helper(opts = {}, &block) ⇒ `String`

Builds a card column.

“‘erb

<%= card_column_helper do |column| %>
  <%= column.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title one' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3, 4, 5, 6, 7].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= column.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title two' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= column.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title three' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>
<% end %>

“‘



330
331
332

# File 'lib/bootstrap4_helper.rb', line 330

def card_column_helper(opts = {}, &block)
  CardColumn.new(self, opts, &block)
end

#card_deck_helper(opts = {}, &block) ⇒ `String`

Builds a card deck.

“‘erb

<%= card_deck_helper do |deck| %>
  <%= deck.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title one' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3, 4, 5, 6, 7].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= deck.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title two' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= deck.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title three' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>
<% end %>

“‘



272
273
274

# File 'lib/bootstrap4_helper.rb', line 272

def card_deck_helper(opts = {}, &block)
  CardDeck.new(self, opts, &block)
end

#card_group_helper(opts = {}, &block) ⇒ `String`

Builds a card group.

“‘erb

<%= card_group_helper do |group| %>
  <%= group.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title one' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3, 4, 5, 6, 7].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= group.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title two' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>

  <%= group.card do |c| %>
      <%= c.body do %>
          <%= c.title { 'This is the title three' } %>
          <%= c.text { 'This card body' } %>
          <ul>
              <% [1, 2, 3].each do |x|  %>
                  <li>Item: <%= x %></li>
              <% end %>
          </ul>
      <% end %>
      <%= c.footer do %>
          This is the footer...
      <% end %>
  <% end %>
<% end %>

“‘



214
215
216

# File 'lib/bootstrap4_helper.rb', line 214

def card_group_helper(opts = {}, &block)
  CardGroup.new(self, opts, &block)
end

#card_helper(opts = {}, &block) ⇒ `String`

Creates a Card component.

“‘erb

<%# Regular %>

<%= card_helper do |c| %>
  <%= c.header class: 'text-white bg-primary' do %>
      <h4>This is the header...</h4>
  <% end %>
  <%= c.body do %>
      <%= c.title { 'This is the title' } %>
      <%= c.text { 'This card body' } %>
      <ul>
          <% [1, 2, 3].each do |x|  %>
              <li>Item: <%= x %></li>
          <% end %>
      </ul>
  <% end %>
  <%= c.footer do %>
      This is the footer...
  <% end %>
<% end %>

<%# Horizontal %>

<div class="row">
  <div class="col-sm mt-3 mb-3">
      <%= card_helper do |c| %>
          <div class="row no-gutters">
              <div class="col-md-4">
                  <%= image_tag 'placeholder.svg', class: 'card-img' %>
              </div>
              <div class="col-md-8">
                  <%= c.body do %>
                      <%= c.title { "Card title" } %>
                      <%= c.text { "This is a wider card with supporting text below as a natural lead-in to additional content." } %>
                      <%= c.text do %>
                          <small class="text-muted">Last updated 3 mins ago</small>
                      <% end %>
                 <% end %>
              </div>
          </div>
      <% end %>
  </div>
</div>

“‘



156
157
158

# File 'lib/bootstrap4_helper.rb', line 156

def card_helper(opts = {}, &block)
  Card.new(self, opts, &block)
end

#dropdown_helper(*args, &block) ⇒ `String`

Generates a Dropdown component. Default type ‘:dropdown`. For inline buttons, use `:group`.

“‘erb

<%= dropdown_helper do |dropdown| %>
  <%= dropdown.button(:primary) { "Action" } %>
  <%= dropdown.menu do |menu| %>
      <%= menu.link 'Edit', '#' %>
      <%= menu.link 'Delete', '#' %>
      <%= menu.text 'Static text' %>
  <% end %>
<% end %>

<%= dropdown_helper :group, class: 'dropright' do |dropdown| %>
  <button type="button" class="btn btn-danger">Action 2</button>
  <%= dropdown.button(:danger, split: true) %>
  <%= dropdown.menu do |menu| %>
      <%= menu.header "Crud operations" %>
      <%= menu.divider %>
      <%= menu.link 'Edit', '#' %>
      <%= menu.link 'Delete', '#' %>
  <% end %>
<% end %>

<%= dropdown_helper do |dropdown| %>
  <%= dropdown.button :primary do %>
      Login
  <% end %>
  <%= dropdown.menu do |menu| %>
      <form class="px-4 py-3">
          <div class="form-group">
              <label for="exampleDropdownFormEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
          </div>
          <div class="form-group">
              <label for="exampleDropdownFormPassword1">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
          </div>
          <div class="form-group">
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="dropdownCheck">
                  <label class="form-check-label" for="dropdownCheck">
                      Remember me
                  </label>
              </div>
          </div>
          <button type="submit" class="btn btn-primary">Sign in</button>
      </form>
      <%= menu.divider %>
      <%= menu.link "New around here? Sign up", "#" %>
      <%= menu.link "Forgot password", "#" %>
  <% end %>
<% end %>

“‘



392
393
394

# File 'lib/bootstrap4_helper.rb', line 392

def dropdown_helper(*args, &block)
  Dropdown.new(self, *args, &block)
end

#input_group_helper(type = :prepend, opts = {}, &block) ⇒ `String`

Generates a input group component.

“‘erb

<%= input_group_helper do |ig| %>
  <%= ig.text do %>
    <i class="fas fa-at"></i>
  <% end %>
  <input type="text" value="" name="email" placeholder="Email" class="form-control" />
<% end %>

<%= input_group_helper :append do |ig| %>
  <input type="text" value="" name="email" placeholder="Email" class="form-control" />
  <%= ig.text { "@" } %>
<% end %>

“‘



480
481
482

# File 'lib/bootstrap4_helper.rb', line 480

def input_group_helper(type = :prepend, opts = {}, &block)
  InputGroup.new(self, type, opts, &block)
end

#modal_helper(opts = {}, &block) ⇒ `String`

Generates Modal windows.

“‘erb

<%= modal_helper id: 'exampleModal' do |m| %>
  <%= m.header do %>
      <%= m.title { 'Example Modal' } %>
      <%= m.close_button %>
  <% end %>
  <%= m.body do %>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nisi tempora, eius iste sit nobis
      earum in harum optio dolore explicabo. Eveniet reprehenderit harum itaque ad fuga beatae, quasi
      sequi! Laborum ea porro nihil ipsam repudiandae vel harum voluptates minima corrupti unde quas,
      dolore possimus doloribus voluptatem sint fuga dolores odio dignissimos at molestias earum.
  <% end %>
  <%= m.footer do %>
      <%= m.close_button class: 'btn btn-secondary' do %>
          Close
      <% end %>
  <% end %>
<% end %>

“‘



421
422
423

# File 'lib/bootstrap4_helper.rb', line 421

def modal_helper(opts = {}, &block)
  Modal.new(self, opts, &block)
end

#nav_helper(opts = {}, &block) ⇒ `String`

Generates Nav components.

“‘erb

<%= nav_helper do |nav| %>
  <%= nav.link "Item 1", "https://www.google.com" %>
  <%= nav.link "Item 2", "#" %>
  <%= nav.link "Item 3", "#" %>
  <%= nav.dropdown :more do |menu| %>
      <%= menu.link 'People', '#' %>
      <%= menu.link 'Records', '#' %>
  <% end %>

  <%= nav.dropdown "More 2" do |menu| %>
      <%= menu.link 'People', '#' %>
      <%= menu.link 'Records', '#' %>
  <% end %>
<% end %>

“‘



447
448
449

# File 'lib/bootstrap4_helper.rb', line 447

def nav_helper(opts = {}, &block)
  Nav.new(self, opts, &block)
end

#page_header_helper(opts = {}, &block) ⇒ `String`

Generates a page header, similiar to bootstrap 3



456
457
458

# File 'lib/bootstrap4_helper.rb', line 456

def page_header_helper(opts = {}, &block)
  PageHeader.new(self, opts, &block)
end

#spinner_helper(*args, &block) ⇒ `String`

Generates spinner annimations.

“‘erb

<%= spinner_helper class: 'text-warning' %>
<%= spinner_helper type: :grow, class: 'text-danger', id: 'loadingRecords' %>

“‘



544
545
546

# File 'lib/bootstrap4_helper.rb', line 544

def spinner_helper(*args, &block)
  Spinner.new(self, *args, &block)
end

#tab_helper(*args, &block) ⇒ `String`

Generates a Tab component.

“‘erb

<%= tab_helper do |tab| %>
  <%= tab.nav do |nav| %>
      <%= nav.item :item1 do %>
          Item 1
      <% end %>
      <%= nav.item(:item2, class: 'active') { "Item 2" } %>
      <%= nav.item(:item3) { "Item 3" } %>
      <%= nav.item :item4 %>
      <%= nav.dropdown 'More' do |dropdown| %>
          <%= dropdown.item :item5 %>
          <%= dropdown.item(:item6) { 'Item 6' } %>
      <% end %>
  <% end %>

  <%= tab.content do |content| %>
      <%= content.pane :item1, class: 'mt-3' do %>
          Content 1
      <% end %>

      <%= content.pane :item2, class: 'active mt-3' do %>
          Content 2
      <% end %>

      <%= content.pane :item3, class: 'mt-3' do %>
          Content 3
      <% end %>

      <%= content.pane :item4, class: 'mt-3' do %>
          Content 4
      <% end %>

      <%= content.pane :item5, class: 'mt-3' do %>
          Content 5
      <% end %>

      <%= content.pane :item6, class: 'mt-3' do %>
          Content 6
      <% end %>
  <% end %>
<% end %>

“‘



531
532
533

# File 'lib/bootstrap4_helper.rb', line 531

def tab_helper(*args, &block)
  Tab.new(self, *args, &block)
end

Module: Bootstrap4Helper

Overview

Defined Under Namespace

Constant Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.config {|@_bs4h_config| ... } ⇒ Bootstrap4Helper::Configuration

Instance Method Details

#accordion_group_helper(*args, &block) ⇒ Accordion

#accordion_helper(opts = {}, &block) ⇒ Accordion

#alert_helper(*args, &block) ⇒ String

#badge_helper(*args, &block) ⇒ String

#card_column_helper(opts = {}, &block) ⇒ String

#card_deck_helper(opts = {}, &block) ⇒ String

#card_group_helper(opts = {}, &block) ⇒ String

#card_helper(opts = {}, &block) ⇒ String

#dropdown_helper(*args, &block) ⇒ String

#input_group_helper(type = :prepend, opts = {}, &block) ⇒ String

#modal_helper(opts = {}, &block) ⇒ String

#nav_helper(opts = {}, &block) ⇒ String

#page_header_helper(opts = {}, &block) ⇒ String

#spinner_helper(*args, &block) ⇒ String

#tab_helper(*args, &block) ⇒ String

.config {|@_bs4h_config| ... } ⇒ `Bootstrap4Helper::Configuration`

#accordion_group_helper(*args, &block) ⇒ `Accordion`

#accordion_helper(opts = {}, &block) ⇒ `Accordion`

#alert_helper(*args, &block) ⇒ `String`

#badge_helper(*args, &block) ⇒ `String`

#card_column_helper(opts = {}, &block) ⇒ `String`

#card_deck_helper(opts = {}, &block) ⇒ `String`

#card_group_helper(opts = {}, &block) ⇒ `String`

#card_helper(opts = {}, &block) ⇒ `String`

#dropdown_helper(*args, &block) ⇒ `String`

#input_group_helper(type = :prepend, opts = {}, &block) ⇒ `String`

#modal_helper(opts = {}, &block) ⇒ `String`

#nav_helper(opts = {}, &block) ⇒ `String`

#page_header_helper(opts = {}, &block) ⇒ `String`

#spinner_helper(*args, &block) ⇒ `String`

#tab_helper(*args, &block) ⇒ `String`