Skip to content

Full-stack background style property type for GrapesJS, with the possibility to add images, colors, and gradients

License

Notifications You must be signed in to change notification settings

GrapesJS/style-bg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 12, 2023
7b153f6 · Jun 12, 2023

History

68 Commits
Jun 12, 2023
Nov 30, 2022
Mar 11, 2020
Jun 12, 2023
Jun 12, 2023
Jun 12, 2023
Jun 12, 2023
Jun 12, 2023

Repository files navigation

Grapesjs Style Bg

Full-stack background style property type for GrapesJS, with the possibility to add images, colors, and gradients.

Requires GrapesJS v0.20.1 or higher

gradient-prv

DEMO

Summary

  • Plugin name: grapesjs-style-bg
  • This plugin updates the built-in background style property.

Options

Option Description Default
styleGradientOpts Options for the grapesjs-style-gradient plugin {}
propExtender Extend single style property definition of the background property. prop => prop

Download

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

Usage

Directly in the browser (remember to include the Grapick CSS)

<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="path/to/grapesjs-style-bg.min.js"></script>

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

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-style-bg';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapick/dist/grapick.min.css';

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

Development

Clone the repository

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

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT

About

Full-stack background style property type for GrapesJS, with the possibility to add images, colors, and gradients

Resources

License

Stars

Watchers

Forks

Packages

No packages published