grapesjs自定义ui组件和布效果例代码-html代码-BFW代码库

grapesjs自定义ui组件和布效果例代码

代码语言：html

所属分类：其他

代码描述：grapesjs自定义ui组件和布效果例代码，可以自定义设置组件的布局位置及所需组件数量。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">

    <style>
        body, html {
          margin: 0;
          font: caption;
          height: 100%;
        }
        
        .gjs-pn-panel {
          position: relative;
        }
        
        .row {
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          flex-wrap: nowrap;
        }
        
        .column {
          min-height: 75px;
          flex-grow: 1;
          flex-basis: 100%;
          overflow: auto;
        }
        
        .editor-clm {
          display: flex;
          flex-direction: column;
        }
        
        .gjs-blocks-c {
           justify-content: center;
           height: 50px;
        }
        
        .gjs-block {
          width: auto;
          font-size: 5px;
          justify-content: center;
          height: auto;
          min-height: auto;
        }
        
        .gjs-block-label {
            display: none;
        }
        
        .gjs-cv-canvas {
            width: 100%;
            height: 100%;
            top: 0;
        }
        
        .gjs-blocks-cs {
            border: 1px solid rgba(0,0,0,0.3);
            border-top: none;
        }
        
        /* Theming */
        .gjs-one-bg {
          background-color: #242A3B; 
        }
        
        .gjs-two-color {
          color: #9ca8bb;
        }
        
        .gjs-three-bg {
          background-color: #1E8FE1;
          color: white;
        }
        
        .gjs-four-color,
        .gjs-four-color-h:hover {
          color: #1E8FE1;
        }
    </style>



</head>

<body>
    <div class="row" style="height:100%">
        <div id="layers" class="column" style="flex-basis: 500px;">
            Layers here
            <div id="layers-container"></div>
        </div>

        <div class="column editor-clm">
            <div id="blocks"></div>
            <div id="gjs2" style="overflow:hidden;">
                <div style="padding: 25px 50px; margin: 50px 50px 0;" data-gjs-name="Text1">
                    Text 1
                </div>
                <div style="padding: 25px 50px; margin: 0 50px;" data-gjs-name="Text2">
                    Text 2
                </div>
            </div>
        </div>

        <div id="style-manager" class="column" style="flex-basis: 500px">
            Style Manager here
            <br>
            <div id="selectors-container"></div>
            <div id="traits-container"></div>
            <div id="style-manager-container"></div>
        </div>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-blocks-basic.js"></script>
    <script>
        va.........完整代码请登录后点击上方下载按钮下载查看