Package Exports

grapesjs-style-gradient
grapesjs-style-gradient/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grapesjs-style-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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