Module: Bootstrap5Helper

Defined in:
lib/bootstrap5_helper.rb,
lib/bootstrap5_helper/nav.rb,
lib/bootstrap5_helper/tab.rb,
lib/bootstrap5_helper/card.rb,
lib/bootstrap5_helper/alert.rb,
lib/bootstrap5_helper/badge.rb,
lib/bootstrap5_helper/modal.rb,
lib/bootstrap5_helper/toast.rb,
lib/bootstrap5_helper/dropup.rb,
lib/bootstrap5_helper/callout.rb,
lib/bootstrap5_helper/dropend.rb,
lib/bootstrap5_helper/overlay.rb,
lib/bootstrap5_helper/railtie.rb,
lib/bootstrap5_helper/spinner.rb,
lib/bootstrap5_helper/version.rb,
lib/bootstrap5_helper/dropdown.rb,
lib/bootstrap5_helper/accordion.rb,
lib/bootstrap5_helper/component.rb,
lib/bootstrap5_helper/constants.rb,
lib/bootstrap5_helper/dropstart.rb,
lib/bootstrap5_helper/offcanvas.rb,
lib/bootstrap5_helper/initialize.rb,
lib/bootstrap5_helper/input_group.rb,
lib/bootstrap5_helper/page_header.rb,
lib/bootstrap5_helper/tab/content.rb,
lib/bootstrap5_helper/overlay/menu.rb,
lib/bootstrap5_helper/configuration.rb,
lib/bootstrap5_helper/accordion/item.rb,
lib/bootstrap5_helper/card_with_nav_tab.rb,
lib/bootstrap5_helper/offcanvas/content.rb

Overview

:nodoc:

Defined Under Namespace

Classes: Accordion, Alert, Badge, Callout, Card, CardWithNavTab, Component, Configuration, Constants, Dropdown, Dropend, Dropstart, Dropup, InputGroup, Modal, Nav, Offcanvas, Overlay, PageHeader, Railtie, Spinner, Tab, Toast

Constant Summary collapse

VERSION =
'1.1.3'.freeze

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.config {|@_bs5h_config| ... } ⇒ Bootstrap5Helper::Configuration

Simple interface for exposing the configuration object.

Yields:

  • (@_bs5h_config)

Returns:



13
14
15
16
17
# File 'lib/bootstrap5_helper/initialize.rb', line 13

def config
  yield @_bs5h_config if block_given?

  @_bs5h_config
end

Instance Method Details

#accordion_helper(opts = {}) {|Accordion| ... } ⇒ Accordion

Creates a single Accordion element.

Examples:

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

Parameters:

  • opts (Hash) (defaults to: {})

Options Hash (opts):

  • :id (String)
  • :class (String)
  • :data (Hash)
  • :always_open (Boolean)
  • :flush (Boolean)

Yields:

Returns:



40
41
42
# File 'lib/bootstrap5_helper.rb', line 40

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

#alert_helper(context, opts) ⇒ Alert #alert_helper(opts) ⇒ Alert

Creates an Alert component.

Examples:

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

Overloads:

  • #alert_helper(context, opts) ⇒ Alert

    Parameters:

    • context (Symbol|String)
      • :primary, :danger etc

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :dismissible (Boolean)
  • #alert_helper(opts) ⇒ Alert

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :dismissible (Boolean)

Returns:



68
69
70
# File 'lib/bootstrap5_helper.rb', line 68

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

#badge_helper(context, opts) ⇒ Badge #badge_helper(opts) ⇒ Badge

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

Examples:

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

Overloads:

  • #badge_helper(context, opts) ⇒ Badge

    Parameters:

    • context (Symbol|String)
      • :primary, :danger etc

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • : (Hash)

      :data

  • #badge_helper(opts) ⇒ Badge

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • : (Hash)

      :data

Returns:



100
101
102
# File 'lib/bootstrap5_helper.rb', line 100

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

#callout_helper(*args, &block) ⇒ Object

Note:

Internal helper, used with personal Bootstrap modifications.



107
108
109
# File 'lib/bootstrap5_helper.rb', line 107

def callout_helper(*args, &block)
  Callout.new(self, *args, &block)
end

#card_helper(opts = {}) {|Card| ... } ⇒ Card

Creates a Card component.

Examples:

Regular Card

```erb
<%= 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 Card

```erb
<%= 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 do
                  This is a wider card with supporting text below as a natural
                  lead-in to additional content.
                <% end %>
                <%= c.text do %>
                    <small class="text-muted">Last updated 3 mins ago</small>
                <% end %>
           <% end %>
        </div>
    </div>
<% end %>
```

Parameters:

  • opts (Hash) (defaults to: {})

Options Hash (opts):

  • :id (String)
  • :class (String)
  • :data (Hash)

Yields:

Returns:



164
165
166
# File 'lib/bootstrap5_helper.rb', line 164

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

#card_with_nav_tab_helper(context, opts) ⇒ CardWithNavTab #card_with_nav_tab_helper(opts) ⇒ CardWithNavTab

Note:

Internal helper, used with personal Bootstrap modifications.

Overloads:

  • #card_with_nav_tab_helper(context, opts) ⇒ CardWithNavTab

    Parameters:

    • context (Symbol|String)
    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
  • #card_with_nav_tab_helper(opts) ⇒ CardWithNavTab

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)

Yields:

Returns:



186
187
188
# File 'lib/bootstrap5_helper.rb', line 186

def card_with_nav_tab_helper(*args, &block)
  CardWithNavTab.new(self, *args, &block)
end

Generates a Dropdown component.

Examples:

Dropdown

```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 w/ Login Form

```erb
<%= 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 %>
```

Overloads:

  • #dropdown_helper(tag, opts) ⇒ Dropdown

    Parameters:

    • tag (Symbol|String)
      • The HTML element to use to wrap the component.

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)
  • #dropdown_helper(opts) ⇒ Dropdown

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)

Yields:

Returns:



255
256
257
# File 'lib/bootstrap5_helper.rb', line 255

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

#dropend_helper(tag, opts) ⇒ Dropend #dropend_helper(opts) ⇒ Dropend

Generates a Dropend component.

Overloads:

  • #dropend_helper(tag, opts) ⇒ Dropend

    Parameters:

    • tag (Symbol|String)
      • The HTML element to use to wrap the component.

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)
  • #dropend_helper(opts) ⇒ Dropend

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)

Yields:

Returns:



327
328
329
# File 'lib/bootstrap5_helper.rb', line 327

def dropend_helper(*args, &block)
  Dropend.new(self, *args, &block)
end

#dropstart_helper(tag, opts) ⇒ Dropstart #dropstart_helper(opts) ⇒ Dropstart

Generates a Dropstart component.

Overloads:

  • #dropstart_helper(tag, opts) ⇒ Dropstart

    Parameters:

    • tag (Symbol|String)
      • The HTML element to use to wrap the component.

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)
  • #dropstart_helper(opts) ⇒ Dropstart

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)

Yields:

Returns:



303
304
305
# File 'lib/bootstrap5_helper.rb', line 303

def dropstart_helper(*args, &block)
  Dropstart.new(self, *args, &block)
end

#dropup_helper(tag, opts) ⇒ Dropup #dropup_helper(opts) ⇒ Dropup

Generates a Dropup component.

Overloads:

  • #dropup_helper(tag, opts) ⇒ Dropup

    Parameters:

    • tag (Symbol|String)
      • The HTML element to use to wrap the component.

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)
  • #dropup_helper(opts) ⇒ Dropup

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :centered (Boolean)

Yields:

  • (Dropdup)

Returns:



279
280
281
# File 'lib/bootstrap5_helper.rb', line 279

def dropup_helper(*args, &block)
  Dropup.new(self, *args, &block)
end

#input_group_helper(context, options) ⇒ InputGroup #input_group_helper(opts) ⇒ InputGroup

Generates a input group component.

Examples:

```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 %>
```

Large input group

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

Overloads:

  • #input_group_helper(context, options) ⇒ InputGroup

    Parameters:

    • context (Symbol|String)
      • :sm, :lg

    • opts (Hash)
  • #input_group_helper(opts) ⇒ InputGroup

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)

Returns:



540
541
542
# File 'lib/bootstrap5_helper.rb', line 540

def input_group_helper(*args, &block)
  InputGroup.new(self, *args, &block)
end

Generates Modal windows.

Examples:

```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 %>
```

Parameters:

  • opts (Hash) (defaults to: {})

Options Hash (opts):

  • :id (String)
  • :class (String)
  • :data (Hash)
  • :scrollable (Boolean)
  • :vcentered (Boolean)
  • :static (Boolean)
  • :fullscreen (Boolean|Symbol)
    • true, :sm, :lg, :xl etc

  • :size (Symbol)
    • :sm, :md, :lg etc

Yields:

Returns:



366
367
368
# File 'lib/bootstrap5_helper.rb', line 366

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

Generates Nav components.

Examples:

```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 %>
```

Overloads:

  • #nav_helper(tag, opts) ⇒ Nav

    Parameters:

    • tag (Symbol|String)
      • :nav, :ul

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :child (Hash)
      • data attributes for child, NOT wrapper

  • #nav_helper(opts) ⇒ Nav

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
    • :child (Hash)
      • data attributes for child, NOT wrapper

Yields:

Returns:



408
409
410
# File 'lib/bootstrap5_helper.rb', line 408

def nav_helper(*args, &block)
  Nav.new(self, *args, &block)
end

#offcanvas_helper(position, options) ⇒ Offcanvas #offcanvas_helper(options) ⇒ Offcanvas

Generates a Offcanvas component.

@example:

```erb
<%= offcanvas_helper :top, id: 'off_canvas_example1' do |off| %>
  <%= off.button 'Open sidebar', class: 'btn btn-primary' %>
  <%= off.content do |c| %>
      <%= c.header do %>
          <%= c.title { 'Sidebar content' } %>
          <%= c.close_button %>
      <% end %>
      <%= c.body do %>
          <p>Some content in the sidebar!</p>
      <% end %>
  <% end %>
<% end %>
```

@example:

```erb
<%= offcanvas_helper scrollable: true, id: 'off_canvas_example2' do |off| %>
  <%= off.link class: 'btn btn-danger' do %>
      <strong>*</strong> Open sidebar 2
  <% end %>

  <%= off.content do |c| %>
      <%= c.header do %>
          <%= c.title { 'Sidebar content 2' } %>
          <%= c.close_button class: 'btn btn-info' do %>
              Close
          <% end %>
      <% end %>
      <%= c.body do %>
          <p>Some content in the sidebar 2!</p>
      <% end %>
  <% end %>
<% end %>
```

Overloads:

  • #offcanvas_helper(position, options) ⇒ Offcanvas

    Parameters:

    • position (Symbol)
      • :start, :end, :top, :bottom

    • opts (Hash)
  • #offcanvas_helper(options) ⇒ Offcanvas

    Parameters:

    • opts (Hash)

Yields:

Returns:



473
474
475
# File 'lib/bootstrap5_helper.rb', line 473

def offcanvas_helper(*args, &block)
  Offcanvas.new(self, *args, &block)
end

#page_header_helper(tag, opts) ⇒ PageHeader #page_header_helper(opts) ⇒ PageHeader

Generates a page header, similiar to bootstrap 3

Examples:

```erb
<%= page_header_helper class: 'mt-5' do %>
  Test Application
<% end %>
```

Overloads:

  • #page_header_helper(tag, opts) ⇒ PageHeader

    Parameters:

    • tag (Symbol|String)
    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
  • #page_header_helper(opts) ⇒ PageHeader

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)

Returns:



501
502
503
# File 'lib/bootstrap5_helper.rb', line 501

def page_header_helper(*args, &block)
  PageHeader.new(self, *args, &block)
end

#spinner_helper(opts = {}, &block) ⇒ Spinner

Generates spinner annimations.

Examples:

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

Parameters:

  • args (Hash)
  • opts (Hash) (defaults to: {})

    a customizable set of options

Options Hash (opts):

  • :type (Symbol)
    • :border, :grow

  • :id (String)
  • :class (String)
  • :data (Hash)

Returns:



625
626
627
# File 'lib/bootstrap5_helper.rb', line 625

def spinner_helper(opts = {}, &block)
  Spinner.new(self, opts, &block)
end

#tab_helper(type, opts) ⇒ Tab #tab_helper(opts) ⇒ Tab

Generates a Tab component.

Examples:

```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 %>
```

Overloads:

  • #tab_helper(type, opts) ⇒ Tab

    Parameters:

    • type (Symbol|String)
      • :tabs, :pills

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)
  • #tab_helper(opts) ⇒ Tab

    Parameters:

    • opts (Hash)

    Options Hash (opts):

    • :id (String)
    • :class (String)
    • :data (Hash)

Yields:

Returns:



606
607
608
# File 'lib/bootstrap5_helper.rb', line 606

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