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

• Plugin name: grapesjs-style-gradient
• Style type: gradient (the gradient picker input)
• Built-in Style property: background-image (composite type with gradient picker and direction/type selectors)

Options

| Option | Description | Default | |-|-|- | grapickOpts | Grapick options. | {} | | colorPicker | Custom color picker, check Grapick's repo to get more about it. | undefined | | selectEdgeStops | Select, by default, the edge color stops of the gradient picker. | true | | styleType | The id to assign for the gradient picker type. | 'gradient' | | builtInType | Built-in property name to use for the composite type with the gradient picker and direction/type selectors. | 'background-image' |

Download

• CDN
  • https://unpkg.com/grapesjs-style-gradient
• NPM
  • npm i grapesjs-style-gradient
• GIT
  • git clone https://github.com/GrapesJS/style-gradient.git

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