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

代码语言:html

所属分类:其他

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

代码标签: grapes 布局 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;
        }
        
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0