Home

Awesome

GrapesJS Style Gradient

This plugins adds a new gradient property to the GrapesJS's StyleManager by using Grapick

Requires GrapesJS v0.20.1 or higher

Demo

Summary

Options

OptionDescriptionDefault
grapickOptsGrapick options.{}
colorPickerCustom color picker, check Grapick's repo to get more about it.undefined
selectEdgeStopsSelect, by default, the edge color stops of the gradient picker.true
styleTypeThe id to assign for the gradient picker type.'gradient'
builtInTypeBuilt-in property name to use for the composite type with the gradient picker and direction/type selectors.'background-image'

Download

Usage

Directly in the browser.

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapick/dist/grapick.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-style-gradient"></script>

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

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-style-gradient';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
});

// Usage via API

// Add gradient picker as a single input
editor.StyleManager.addProperty('decorations', {
  type: 'gradient', // <- new type
  name: 'Gradient',
  property: 'background-image',
  defaults: 'none'
  full: true,
});

// Add the new background-image bulti-in type
editor.StyleManager.addProperty('decorations', {
  extend: 'background-image', // <- extend the built-in type
  name: 'Gradient Background',
});

Development

Clone the repository

$ git clone https://github.com/GrapesJS/style-gradient.git
$ cd style-gradient

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause