grapesjs-bootstrap4-blocks

Release 0.2.17

GrapesJS Bootstrap v4 Blocks Plugin

Homepage Repository npm JavaScript Download

Keywords
grapesjs, plugin, bootstrap
License
BSD-3-Clause
Install
npm install grapesjs-bootstrap4-blocks@0.2.17

Documentation

GrapesJS Bootstrap v4 Blocks Plugin

npm

Summary

  • Plugin name: grapesjs-blocks-bootstrap4
  • Components (see Options for list of Blocks)
    • Layout
      • container
      • row
      • column
      • column_break
      • media_object
      • media_body
    • Components
      • alert
      • tabs
      • badge
      • card
      • card_container
      • collapse
      • dropdown
      • dropdown_menu
      • navbar
      • menu
      • menu_link
      • dropdown_link
    • Typography
      • text
      • header
      • paragraph
    • Media
      • image
      • video
    • Forms
      • form
      • button
      • button_group
      • button_toolbar
      • input
      • input_group
      • form_group_input
      • textarea
      • checkbox
      • radio

Options

{
  blocks: {
    ...
  }
  blockCategories: {
    ...
  }
  labels: {
    ...
  }
  formPredefinedActions: null,
  optionsStringSeparator: '::'
}

Blocks

Option Description Default
default Rebuild default component with utility settings true
text Rebuild text component to re-inherit from default true
link Rebuild link component to re-inherit from default and give toggle setting true
image Rebuild image component to re-inherit from default true
video Rebuild video component to re-inherit from default true
container Container (fixed/fluid) true
row Row true
column Columns of all sizes true
column_break Column-break (div.w-100) true
media_object Media object true
alert true
tabs true
badge true
card Card with settings for images, image overlay, header, body, & footer components true
card_container Layouts: group, deck, columns true
collapse Collapse component that can be toggled via link component true
dropdown Dropdown true
header H1-H6 true
paragraph P tag with "lead" setting true
form true
button true
button_group true
button_toolbar true
input true
input_group true
form_group_input true
textarea true
checkbox true
radio true
navbar Boostrap Navbar true
menu navbar menu true
menu_link Menu Item true
dropdown_link Dropdown Menu Item true

Block Categories

These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false exclude entire groups of blocks (as well as the associated components).

Option Description Default
layout Container, row, col, col-break, media object true
components Bootstrap's Components--alert, button, card, etc. true
typography Text, header, paragraph, etc. true
basic Link, image, etc. true
forms Form, input, textarea, etc. true

Labels

Same keys as Blocks, but value is the label for the block.

Option Description Default
text 'Text'
header 'Header'

etc.

Other

Option Description Default
gridDevices Add devices based on BS grid breakpoints true
gridDevicesPanel Build a panel in the top-left corner with device buttons (use with editor showDevices=false) false
formPredefinedActions Pass a list of predefined form actions to generate a select menu: [{name: 'Contact', value: '/contact'}, ...], if no list is passed an input box to add the action is shown null
optionsStringSeparator Pass a string to identify the separator of values and labels of the select options: optionValue::optionLabel. This setting WILL BE overridden by the gjs-preset-webpage plugin if enabled '::'

Download

  • NPM
    • npm i grapesjs-bootstrap4-blocks
  • GIT
    • git clone https://github.com/jcsofts/grapesjs-blocks-bootstrap4.git

Usage

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-bootstrap4-blocks.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-blocks-bootstrap4'],
      pluginsOpts: {
        'grapesjs-blocks-bootstrap4': {
          blocks: {
            // ...
          },
          blockCategories: {
            // ...
          },
          labels: {
            // ...
          },
          // ...
        }
      },
      canvas: {
        styles: [
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
        ],
        scripts: [
          'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
        ],
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/jcsofts/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause

Stats

Dependencies
0
Dependent packages
2
Dependent repositories
0
Total releases
12
Latest release
First release
Stars
1
Forks
1
Watchers
0
Contributors
0
Repository size
1.62 MB
SourceRank
7

Development practices

Source repo 2FA enabled
TEXT!
Package manager 2FA enabled
TEXT!
Is security responsive
TEXT!
Dependencies are managed
TEXT!
Issue-free release available
TEXT!
Succession plan available
TEXT!
Package manager 2FA enabled
TEXT!

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

Learn more →

Releases

0.2.17
0.2.16
0.2.15
0.2.14
0.2.13
0.2.12
0.2.11
0.2.10
0.2.9
0.2.8
See all 12 releases

Something wrong with this page? Make a suggestion

Export .ABOUT file for this package

Last synced: 2022-05-04 02:17:17 UTC

Login to resync this project