Aside Helper

Asides are basically modals that slide out from the left or right side but do not have a backdrop. In fact they depend on bootstrap's modal.js and use all the same properties, events, and methods as modals.

To add an aside to your page do the follow:

• Include the aside component in your bootstrap_and_overrides.css.less

@import "railsstrap"; //this is EVERYTHING including aside
@import "aside/aside"; //this is the minimum required for asides. Not required if you import railsstrap.

• Add the helper to your view

= content_tag :a, "Aside Example", :href => "#aside", :class => 'btn btn-default', :data => {:toggle => 'modal', :target => '#aside'}
= aside_dialog :id => "aside", :class => 'right',                                     |
  :header => { :show_close => true, :dismiss => 'modal', :title => 'Aside header' }, |
  :body => { :content => 'This is an aside modal. Try resizing the window!' },       |
  :footer => { :content => content_tag(:button, 'Neat! Bye!', :class => 'btn btn-primary', :data => { :dismiss => 'modal', :target => '#aside' }) }

Notice the data-toggle attribute is modal, but the target is the same as the aside_dialog id.

Options:

aside_dialog takes a class attribute of left or right. You can also add your own css classes in combination with the provided animations for complete control over the component. Left and right are the supported options however.

This outputs the aside to the page:

<div id="aside" class="railsstrap-aside aside left" data-backdrop="false">
  <div class="aside-dialog ">
    <div class="aside-content">
      <div class="aside-header">
        <button class="close" data-dismiss="aside" aria-hidden="true">&times;</button>
        <h4 class="aside-title">Aside header</h4>
      </div>
      <div class="aside-body">This is the body</div>
      <div class="aside-footer">
        <button class="btn">Save</button>
      </div>
    </div>
  </div>
</div>