Style Filter
1 images

Description

This plugins adds a new filter built-in style property which can be used for CSS properties like filter and backdrop-filter.

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-style-filter.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  const editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-style-filter'],

      // Use the property on init
      styleManager: {
        sectors: [
          // ...
          {
            id: 'extra',
            name: 'Extra',
            properties: [
              { extend: 'filter' },
              { extend: 'filter', property: 'backdrop-filter' },
            ],
          }
        ]
      },
  });

  // or add it to the StyleManager via API
  editor.StyleManager.addProperty('extra', { extend: 'filter' });
  editor.StyleManager.addProperty('extra', { extend: 'filter', property: 'backdrop-filter' });
</script>

Ratings:

0

0 reviews

5
0
4
0
3
0
2
0
1
0

Share this item:
Last Update:Sep 22, 2022
Published:Sep 22, 2022
Versions:
0.16.x0.17.x0.18.x0.19.x0.20.x

Product Reviews (0)

Sort By :

No Reviews Found

Question and Answers (0)

No question found