Offcanvas(ui_offcanvas)Bootstrap Logo

UiBibz::Ui::Core::Windows::Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

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_offcanvas 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
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)
  • position[symbol](:start, :end, :top, :bottom)
  • scroll[boolean]
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:

Examples

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

Offcanvas

offcanvas
Offcanvas title
One fine body
ui_offcanvas({class: 'offcanvas-example'}, {id: "offcanvas"}) do |m|
  m.header "<b>Offcanvas title</b>"
  m.body "One fine body"
end

""

Backdrop static

You can also enable scrolling with a visible backdrop.

Static Backdrop offcanvas
Backdrop Offcanvas title
One fine body 
ui_button_link 'Static Backdrop offcanvas', { url: '#' }, { data: { "bs-toggle": 'offcanvas', "bs-target": '#backdrop-offcanvas' }}

ui_offcanvas({ backdrop: :static}, {id: "backdrop-offcanvas"}) do |m|
  m.header do
    "Backdrop Offcanvas title"
  end
  m.body do
    "One fine body"
  end
end

<div class="card-header"><a data-bs-toggle="offcanvas" data-bs-target="#offcanvas" class="btn-secondary btn" role="button" href="#">offcanvas</a>
<div id="offcanvas" class="offcanvas-example offcanvas offcanvas-start show" tabindex="-1" aria-modal="true" role="dialog">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas title</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">One fine body</div>
</div>

Scrollable

Scrolling the element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable scrolling.

Scrollable offcanvas
Backdrop Offcanvas title
One fine body 
ui_button_link 'Scrollable offcanvas', { url: '#' }, { data: { "bs-toggle": 'offcanvas', "bs-target": '#scrollable-offcanvas' }}
ui_offcanvas({ scrollable: true }, {id: "scrollable-offcanvas"}) do |m|
  m.header do
    "Scrollable Offcanvas title"
  end
  m.body do
    "..."
  end
end

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

<div id="scrollable-offcanvas" class="offcanvas show" tabindex="-1" aria-labelledby="Scrollable Offcanvas title" aria-offcanvas="true" role="dialog" style="padding-right: 15px; display: block;">
  <div class="offcanvas-dialog offcanvas-dialog-scrollable">
    <div class="offcanvas-content">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">Scrollable Offcanvas title</h5>
        <button class="close" data-bs-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
      </div>
      <div class="offcanvas-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="offcanvas-footer"><button data-bs-dismiss="offcanvas" class="btn-secondary btn">Close</button>
        <button class="btn-primary btn">Understood</button>
      </div>
    </div>
  </div>
</div>

Position

Offcanvas must be inserted outside a card.

offcanvas bottom
Backdrop Offcanvas title
One fine body 
ui_buttcanvas bottom', { url: '#' }, { data: { "bs-toggle": 'offcanvas', "bs-target": '#bottom-offcanvas' }}
ui_offcanvas({ position: :bottom}, {id: "bottom-offcanvas"}) do |m|
  m.header do
    'Backdrop Offcanvas title'
  end
  m.body do
    'One fine body'
  end
end

<a data-bs-toggle="offcanvas" data-bs-target="#bottom-offcanvas" class="btn-secondary btn" role="button" href="#">offcanvas bottom</a>
<div id="bottom-offcanvas" class="offcanvas offcanvas-bottom show" tabindex="-1" aria-modal="true" role="dialog">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Backdrop Offcanvas title</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">One fine body</div>
</div>