Slideover

Slideover is used for off-canvas content. The component must be placed inside .app-layout to function correctly. Visibility is controlled by toggling the aria-expanded attribute.

Variants:

  • Default - slides out from right edge
  • .slideover--to-top slides from bottom to top

Usually, slideovers contain a pane for layouting.

Unless using nested sledovers like in Chat, only one slideover is supported due to z-index issues. To close any open slideovers when opening a new one with Toggle, just add them as toggle targets: data-toggle="#slideover-1, #slideover-2[aria-expanded=true]". This way #slideover-1 will always open/close and #slideover-2[aria-expanded=true] will close if it's open.

Note

Please note that this preview overrides some styles for it to be shown inline.

Files

app/styles/components/slideover/config.scss
app/styles/components/slideover/style.scss

Slideover

Example:

Code:
<button data-toggle='#slideover-example-1, #slideover-example-2[aria-expanded=true]'>toggle</button>
<button data-toggle='#slideover-example-2, #slideover-example-1[aria-expanded=true]'>toggle</button>

<div id='#slideover-example-1' class='slideover' aria-expanded='false' data-toggle-expand>
  ...
</div>

<div id='#slideover-example-2' class='slideover slideover--to-top' aria-expanded='false' data-toggle-expand>
  ...
</div>

Large slideover

Example:
Code:
<button data-toggle='#slideover-large'>toggle</button>

<div id='#slideover-large' class='slideover slideover--large' aria-expanded='false' data-toggle-expand>
  ...
</div>