ifwaxtel/style-gradient

Add gradient input to the Style Manager in GrapesJS

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