How to create off-canvas dialog in drupal 8

Category:

in this tuto, I'll show you how to create off-canvas dialog in drupal 8.

Off canvas dialogs: Are no popup windows that overlap other content, but are sliding into the page by moving other content to the side.

This type of dialog is especially useful to display larger portions of content, like long detail pages that could require the user to scroll down. Also the off canvas dialog is well usable on mobile devices.

Before you try to display Off canvas dialogs on your site, make sure the drupal.dialog.ajax library is loaded. Add the library as a dependency to your theme or module.

add library in twig:

{{ attach_library('core/drupal.dialog.ajax') }}

add library in PHP:

$variables['#attached']['library'][] = 'core/drupal.dialog.ajax';

and then add the following snippet:

<a class="use-ajax"
   data-dialog-options="{&quot;width&quot;:400}"
   data-dialog-type="dialog"
   data-dialog-renderer="off_canvas"
   href="/node/35">
  Open Dialog
</a>

Links can be used to display a Off canvas dialogs by simply adding the use-ajax class to the HTML element and specifying some dialog options.

This link opens /node/35 in a Off canvas dialogs.

data-dialog-type: This is either 'modal' or 'dialog'.

data-dialog-options: A JSON encoded string of options for Drupal.dialog.

if Off canvas dialogs not displaying with a Javascript error, you might have to use " instead of ". A valid parameter would be:

data-dialog-options="{"width":400}"

And that's it! Off-canvas dialog is done and ready for action.