Skip to content

SlideOver

Slide-over works thanks to the atomOverlay, which in turn is based on store overlay. Molecule slide-over is a side, right, retractable container in which there may be some elements of the application, displayed on a transparent background.

Slide-over supports the blocking of the scroll position just like in modal, so in addition to avoid the width jump effect, set:

css
body {
  overflow-y: scroll;
}

Props

templateId
Indicates what element it is displayed with overlay
type:String
default:slideover
canClose
It can block the possibility of closing the slidever by clicking outside its area
type:Boolean
default:true

Slots

default
Default slot for scrollful content
header
Optional top area
footer
Optional bottom area

Examples

Slideover
html
<btn @click="displaySample()" color="primary" text="Open SlideOver" />
<slide-over> Text </slide-over>
ts
import { useOverlayStore } from '@riupress/ui'

const useOverlay = useOverlayStore()
function displaySample() {
  useOverlay.show('slideover')
}
function closeModal() {
  useOverlay.updateShowTemplate(false)
  useOverlay.updateShow(false)
}

WARNING

The transparent layer or overlay is used with many components and therefore should be used once, globally, e.g. in a layout.

Slideover z ze slotami
html
<btn @click="displaySample()" color="primary" text="Open SlideOver" />
<slide-over templateId="slideoverfull">
  <template #header>There is a header here</template>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam risus nibh, tincidunt id orci id, faucibus vehicula lacus. Sed ultricies in tellus sit amet finibus. Sed vel leo quis erat fermentum mollis. Maecenas laoreet porttitor ipsum non lacinia. Pellentesque nec consequat turpis. Ut id elit mauris. Curabitur consequat et nisl eu tincidunt.</p><p>Duis consequat, libero quis dapibus laoreet, erat leo iaculis sapien, sit amet commodo augue mauris eu nisi. Suspendisse imperdiet egestas ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies convallis vestibulum. Vivamus lobortis nulla eget mi sodales feugiat. Mauris facilisis vulputate urna et consequat. Integer commodo molestie ex sit amet sollicitudin. Quisque mattis eget purus vitae posuere. Maecenas aliquam auctor libero, ac bibendum turpis posuere eleifend. Curabitur mi odio, tempor sit amet tempor condimentum, aliquet molestie nisi.</p><p>In ligula felis, consequat at suscipit ut, convallis et purus. Quisque non dui et enim lobortis pretium eget sed nisl. Nam eu consectetur turpis. Phasellus eu porttitor ipsum. Pellentesque dictum nisi eget risus iaculis, ultrices dapibus sapien iaculis. Praesent eu sodales enim, vel posuere mauris. Nulla vitae ante turpis. Pellentesque in eros sapien. Morbi vel nisl at metus vehicula tempus eu non turpis. Nulla tincidunt elementum mauris at semper. Donec eu pharetra dui, vel ultrices turpis. Duis ut ligula congue, tincidunt metus in, porta diam. Aenean aliquam tincidunt erat at ornare.</p><p>Cras euismod metus ut commodo aliquet. Sed nec eros accumsan, ultrices felis eget, consequat urna. Ut blandit, mauris sed gravida rutrum, mi sem sollicitudin odio, in vestibulum metus arcu id tortor. Duis at nisi ut mauris maximus consectetur eu et mi. Morbi pharetra, odio at venenatis pellentesque, odio justo dapibus turpis, vitae consectetur metus purus in nibh. Vestibulum eget justo iaculis, auctor ante non, volutpat nunc. Vivamus facilisis iaculis ligula, facilisis laoreet ex fermentum et. Curabitur cursus ipsum a justo pharetra congue. Nulla facilisi. Suspendisse feugiat massa in accumsan vehicula. Sed rhoncus rutrum nisi in tristique. Donec aliquet, orci at bibendum cursus, orci metus cursus est, in aliquet enim est tincidunt ex. Nulla euismod sapien urna, a dictum lectus vehicula eu. Morbi eget tempor odio. Ut vulputate dui quis lorem dapibus varius.</p><p>Curabitur sit amet tristique est, nec dictum lacus. Quisque feugiat nibh dolor, maximus tristique erat mollis porta. Nunc dignissim ac lacus et suscipit. Mauris non elit imperdiet, tempus dolor in, pellentesque ipsum. Fusce luctus libero ante, ac facilisis velit pharetra sit amet. Phasellus id ante nibh. Nam ac gravida neque. Fusce finibus diam imperdiet ligula congue sagittis. Proin ut elementum ligula, eget sollicitudin quam.</p>
  </div>
  <template #footer><btn @click="closeSlideOver()" color="primary" text="Close SlideOver" /></template>
  </slide-over>