Quickview title

...

QuickView

Display 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.

<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>
function closest(el, selector) {
var matchesFn;

// find vendor prefix
[ 'matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector' ].some( function( fn ) {
if ( typeof document.body[ fn ] == 'function' ) {
matchesFn = fn;
return true;
}
return false;
} );

var parent;

// traverse parents
while ( el ) {
parent = el.parentElement;
if ( parent && parent[ matchesFn ]( selector ) ) {
return parent;
}
el = parent;
}

return null;
}

document.addEventListener( 'DOMContentLoaded', function () {
// Get all document sliders
var showQuickview = document.querySelectorAll( '[data-show="quickview"]' );
[].forEach.call( showQuickview, function ( show ) {
var quickview = document.getElementById( show.dataset[ 'target' ] );
if ( quickview ) {
// Add event listener to update output when slider value change
show.addEventListener( 'click', function( event ) {
quickview.classList.add( 'is-active' );
} );
}
} );

// Get all document sliders
var dismissQuickView = document.querySelectorAll( '[data-dismiss="quickview"]' );
[].forEach.call( dismissQuickView, function ( dismiss ) {
var quickview = closest( dismiss, '.quickview' );
if ( quickview ) {
// Add event listener to update output when slider value change
dismiss.addEventListener( 'click', function( event ) {
quickview.classList.remove( 'is-active' );
} );
}
} );
} );

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