Quickview title

...

QuickView

Display a quick view of data without leaving the current page

Colors No
Sizes No
Javascript Yes
Variables Yes


Javascript #

Javascript

The extension comes with a JavaScript implementation to display / close the quickview. Don't forget to include it in your project.

<div id="quickviewDefault" class="quickview">
  <header class="quickview-header">
    <p class="title">Quickview title</p>
    <span class="delete" data-dismiss="quickview"></span>
  </header>

  <div class="quickview-body">
    <div class="quickview-block">
      ...
    </div>
  </div>

  <footer class="quickview-footer">

  </footer>
</div>

<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-quickview/dist/bulma-quickview.min.js"></script>

Then just add the following code once your DOM's ready:

var quickviews = bulmaQuickview.attach(); // quickviews now contains an array of all Quickview instances

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$quickview-shadow 5px 0px 13px 3px rgba( 0, 0, 0, 0.1 )
$quickview-divider 1px solid $grey-lighter