Getting Started
Components

Offcanvas

Description

Creates a side panel or overlay that slides in and out of view, providing a space-efficient navigation or content display option for mobile and desktop layouts.

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

Arguments

Name Default Type Description
placement start String Placement the offcanvas
Options: start, end, top, bottom
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Launch 

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

  <%= render Railsboot::OffcanvasComponent.new(id: "exampleOffcanvas") do |offcanvas| %>
    <% offcanvas.with_header(text: "Offcanvas") %>
    <% offcanvas.with_body do %>
      Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
    <% end %>
  <% end %>
</div>

<!-- Button trigger offcanvas -->
<div style="height: 400px;">
  <button type="button" data-bs-toggle="offcanvas" data-bs-target="#exampleOffcanvas" class="btn btn-primary">
    Launch Offcanvas
  </button>
  <div id="exampleOffcanvas" class="offcanvas offcanvas-start" tabindex="-1">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Offcanvas</h5>
      <button data-bs-dismiss="offcanvas" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">      Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
    </div>
  </div>
</div>

Placements 

<div style="height: 400px;">
  <div class="d-flex flex-wrap gap-3">
    <!-- Button trigger offcanvas -->
    <%= render Railsboot::ButtonComponent.new(text: "Toggle Left Offcanvas", data: {bs_toggle: "offcanvas", bs_target: "#startOffcanvas"}) %>
    <%= render Railsboot::ButtonComponent.new(text: "Toggle Right Offcanvas", data: {bs_toggle: "offcanvas", bs_target: "#endOffcanvas"}) %>
    <%= render Railsboot::ButtonComponent.new(text: "Toggle Top Offcanvas", data: {bs_toggle: "offcanvas", bs_target: "#topOffcanvas"}) %>
    <%= render Railsboot::ButtonComponent.new(text: "Toggle Bottom Offcanvas", data: {bs_toggle: "offcanvas", bs_target: "#bottomOffcanvas"}) %>
  </div>

  <!-- Left Offcanvas -->
  <%= render Railsboot::OffcanvasComponent.new(placement: "start", id: "startOffcanvas") do |offcanvas| %>
    <% offcanvas.with_header(text: "Left Offcanvas") %>
    <% offcanvas.with_body.with_content("Content for the offcanvas goes here.") %>
  <% end %>

  <!-- Right Offcanvas -->
  <%= render Railsboot::OffcanvasComponent.new(placement: "end", id: "endOffcanvas") do |offcanvas| %>
    <% offcanvas.with_header(text: "Right Offcanvas") %>
    <% offcanvas.with_body.with_content("Content for the offcanvas goes here.") %>
  <% end %>

  <!-- Top Offcanvas -->
  <%= render Railsboot::OffcanvasComponent.new(placement: "top", id: "topOffcanvas") do |offcanvas| %>
    <% offcanvas.with_header(text: "Top Offcanvas") %>
    <% offcanvas.with_body.with_content("Content for the offcanvas goes here.") %>
  <% end %>

  <!-- Bottom Offcanvas -->
  <%= render Railsboot::OffcanvasComponent.new(placement: "bottom", id: "bottomOffcanvas") do |offcanvas| %>
    <% offcanvas.with_header(text: "Bottom Offcanvas") %>
    <% offcanvas.with_body.with_content("Content for the offcanvas goes here.") %>
  <% end %>
</div>

<div style="height: 400px;">
  <div class="d-flex flex-wrap gap-3">
    <!-- Button trigger offcanvas -->
    <button type="button" data-bs-toggle="offcanvas" data-bs-target="#startOffcanvas" class="btn btn-primary">
      Toggle Left Offcanvas
    </button>
    <button type="button" data-bs-toggle="offcanvas" data-bs-target="#endOffcanvas" class="btn btn-primary">
      Toggle Right Offcanvas
    </button>
    <button type="button" data-bs-toggle="offcanvas" data-bs-target="#topOffcanvas" class="btn btn-primary">
      Toggle Top Offcanvas
    </button>
    <button type="button" data-bs-toggle="offcanvas" data-bs-target="#bottomOffcanvas" class="btn btn-primary">
      Toggle Bottom Offcanvas
    </button>
  </div>
  <!-- Left Offcanvas -->
  <div id="startOffcanvas" class="offcanvas offcanvas-start" tabindex="-1">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Left Offcanvas</h5>
      <button data-bs-dismiss="offcanvas" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">Content for the offcanvas goes here.</div>
  </div>
  <!-- Right Offcanvas -->
  <div id="endOffcanvas" class="offcanvas offcanvas-end" tabindex="-1">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Right Offcanvas</h5>
      <button data-bs-dismiss="offcanvas" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">Content for the offcanvas goes here.</div>
  </div>
  <!-- Top Offcanvas -->
  <div id="topOffcanvas" class="offcanvas offcanvas-top" tabindex="-1">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Top Offcanvas</h5>
      <button data-bs-dismiss="offcanvas" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">Content for the offcanvas goes here.</div>
  </div>
  <!-- Bottom Offcanvas -->
  <div id="bottomOffcanvas" class="offcanvas offcanvas-bottom" tabindex="-1">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Bottom Offcanvas</h5>
      <button data-bs-dismiss="offcanvas" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">Content for the offcanvas goes here.</div>
  </div>
</div>

Slots

header Railsboot::Offcanvas::HeaderComponent

The header of the offcanvas component

Name Default Type Description
text String The headline of header
html_attributes {} Hash Any attributes for the used html wrapper tag
body Railsboot::Offcanvas::BodyComponent

The body of the offcanvas component

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/offcanvas_component.rb).
  • A view template (app/components/railsboot/offcanvas_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/offcanvas_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.

Navbar Pagination