grapejs自定义按钮和pannel面板示例代码-html代码-BFW代码库

grapejs自定义按钮和pannel面板示例代码

代码语言：html

所属分类：其他

代码描述：grapejs自定义按钮和pannel面板示例代码，包括自定义styleManager、traitManager、selectorManager、storageManager、blockManager、deviceManager及panels面板和主题色设置。

代码标签： grapejs 自定义按钮 pannel 面板示例代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>
    <style>
        $primaryColor: #444;
    $secondaryColor: #ddd;
    $tertiaryColor: #804f7b;
    $quaternaryColor: #d278c9;
      body, html {
              margin: 0;
              font: caption;
              height: 100%;
            }
    /* We can remove the border we've set at the beginnig */
    #gjs {
      border: none;
    }
    /* Theming */
    
    /* Primary color for the background */
    .gjs-one-bg {
      background-color: #78366a;
    }
    
    /* Secondary color for the text color */
    .gjs-two-color {
      color: rgba(255, 255, 255, 0.7);
    }
    
    /* Tertiary color for the background */
    .gjs-three-bg {
      background-color: #ec5896;
      color: white;
    }
    
    /* Quaternary color for the text color */
    .gjs-four-color,
    .gjs-four-color-h:hover {
      color: #ec5896;
    }
          
            
        /* Let's highlight canvas boundaries */
    #gjs {
      border: 3px solid #444;
    }
    
    /* Reset some default styling */
    .gjs-cv-canvas {
      top: 0;
      width: 100%;
      height: 100%;
    }
.gjs-block {
  width: auto;
  height: auto;
  min-height: auto;
}
       .panel__top {
  padding: 0;
  width: 100%;
  display: flex;
  position: initial;
  justify-content: center;
  justify-content: space-between;
}

    .panel__basic-actions {
      position: initial;
    }
    .panel__switcher {
  position: initial;
}
    .editor-row {
  disp.........完整代码请登录后点击上方下载按钮下载查看