RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/GrapesJS/style-gradient below:

GrapesJS/style-gradient: Add gradient input to the Style Manager in GrapesJS

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

Requires GrapesJS v0.20.1 or higher

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)

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'

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

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',
});

Clone the repository

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

Install dependencies

Start the dev server

BSD 3-Clause

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4