mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
23 KiB
88 lines
23 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Layer Manager | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.8.2">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.20.1">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.20.1"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.e436248b.css" as="style"><link rel="preload" href="/docs/assets/js/app.dd84d164.js" as="script"><link rel="preload" href="/docs/assets/js/11.4d9adeab.js" as="script"><link rel="preload" href="/docs/assets/js/2.8548a83e.js" as="script"><link rel="preload" href="/docs/assets/js/68.0a55007b.js" as="script"><link rel="preload" href="/docs/assets/js/17.0f11e6ce.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.b8f1122d.js"><link rel="prefetch" href="/docs/assets/js/12.4380b50e.js"><link rel="prefetch" href="/docs/assets/js/13.e2e5fc8d.js"><link rel="prefetch" href="/docs/assets/js/14.b3e88f18.js"><link rel="prefetch" href="/docs/assets/js/15.5fe6ed8b.js"><link rel="prefetch" href="/docs/assets/js/16.2749e923.js"><link rel="prefetch" href="/docs/assets/js/18.1a9fd0b1.js"><link rel="prefetch" href="/docs/assets/js/19.5595cf96.js"><link rel="prefetch" href="/docs/assets/js/20.efb8f37c.js"><link rel="prefetch" href="/docs/assets/js/21.a4a9f558.js"><link rel="prefetch" href="/docs/assets/js/22.67aecbbc.js"><link rel="prefetch" href="/docs/assets/js/23.fb78379a.js"><link rel="prefetch" href="/docs/assets/js/24.411ecf3a.js"><link rel="prefetch" href="/docs/assets/js/25.4c566f71.js"><link rel="prefetch" href="/docs/assets/js/26.05157df2.js"><link rel="prefetch" href="/docs/assets/js/27.fb29b109.js"><link rel="prefetch" href="/docs/assets/js/28.30853f42.js"><link rel="prefetch" href="/docs/assets/js/29.6e51704e.js"><link rel="prefetch" href="/docs/assets/js/3.9afc330f.js"><link rel="prefetch" href="/docs/assets/js/30.3ad70940.js"><link rel="prefetch" href="/docs/assets/js/31.3f953803.js"><link rel="prefetch" href="/docs/assets/js/32.04a7eec6.js"><link rel="prefetch" href="/docs/assets/js/33.e45d78bc.js"><link rel="prefetch" href="/docs/assets/js/34.78e7d884.js"><link rel="prefetch" href="/docs/assets/js/35.cb782205.js"><link rel="prefetch" href="/docs/assets/js/36.8091d2a6.js"><link rel="prefetch" href="/docs/assets/js/37.0fddc76a.js"><link rel="prefetch" href="/docs/assets/js/38.df425c7c.js"><link rel="prefetch" href="/docs/assets/js/39.afa54352.js"><link rel="prefetch" href="/docs/assets/js/4.1ed647e2.js"><link rel="prefetch" href="/docs/assets/js/40.95244c63.js"><link rel="prefetch" href="/docs/assets/js/41.e90d0338.js"><link rel="prefetch" href="/docs/assets/js/42.79ad91ff.js"><link rel="prefetch" href="/docs/assets/js/43.4d608218.js"><link rel="prefetch" href="/docs/assets/js/44.8b37fc92.js"><link rel="prefetch" href="/docs/assets/js/45.d5274a9c.js"><link rel="prefetch" href="/docs/assets/js/46.15c29551.js"><link rel="prefetch" href="/docs/assets/js/47.7295c4da.js"><link rel="prefetch" href="/docs/assets/js/48.fa3cf0cb.js"><link rel="prefetch" href="/docs/assets/js/49.5215a598.js"><link rel="prefetch" href="/docs/assets/js/5.c195c270.js"><link rel="prefetch" href="/docs/assets/js/50.32d89d84.js"><link rel="prefetch" href="/docs/assets/js/51.031e6dcd.js"><link rel="prefetch" href="/docs/assets/js/52.c4bc8bcb.js"><link rel="prefetch" href="/docs/assets/js/53.e64883b5.js"><link rel="prefetch" href="/docs/assets/js/54.47ab0c01.js"><link rel="prefetch" href="/docs/assets/js/55.579bdc4b.js"><link rel="prefetch" href="/docs/assets/js/56.1561016d.js"><link rel="prefetch" href="/docs/assets/js/57.2d694b14.js"><link rel="prefetch" href="/docs/assets/js/58.68ae9d46.js"><link rel="prefetch" href="/docs/assets/js/59.24db953c.js"><link rel="prefetch" href="/docs/assets/js/6.c1cef592.js"><link rel="prefetch" href="/docs/assets/js/60.893edf9b.js"><link rel="prefetch" href="/docs/assets/js/61.c7b4ec6c.js"><link rel="prefetch" href="/docs/assets/js/62.adb377b9.js"><link rel="prefetch" href="/docs/assets/js/63.3dc11bed.js"><link rel="prefetch" href="/docs/assets/js/64.05e11b45.js"><link rel="prefetch" href="/docs/assets/js/65.d02550fa.js"><link rel="prefetch" href="/docs/assets/js/66.072fe07f.js"><link rel="prefetch" href="/docs/assets/js/67.5ed08f6d.js"><link rel="prefetch" href="/docs/assets/js/69.1c86d598.js"><link rel="prefetch" href="/docs/assets/js/7.2b8ec524.js"><link rel="prefetch" href="/docs/assets/js/70.766caa71.js"><link rel="prefetch" href="/docs/assets/js/71.497d7abc.js"><link rel="prefetch" href="/docs/assets/js/72.fd0e2937.js"><link rel="prefetch" href="/docs/assets/js/73.66f004dc.js"><link rel="prefetch" href="/docs/assets/js/74.7ac5115f.js"><link rel="prefetch" href="/docs/assets/js/8.d31a4ddf.js"><link rel="prefetch" href="/docs/assets/js/9.bc6c23c0.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.e436248b.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components & JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" aria-current="page" class="active sidebar-link">Layers</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Layers.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Layers.html#programmatic-usage" class="sidebar-link">Programmatic usage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Layers.html#customization" class="sidebar-link">Customization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Layers.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="layer-manager"><a href="#layer-manager" class="header-anchor">#</a> Layer Manager</h1> <p align="center"><img src="/docs/layer-manager.png" alt="GrapesJS - Layer Manager"></p> <p>The Layer Manager module is responsible to manage and display your <a href="/docs/modules/Components.html">Components</a> as a tree.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide is referring to GrapesJS v0.19.5 or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#programmatic-usage">Programmatic usage</a></li><li><a href="#customization">Customization</a></li><li><a href="#events">Events</a></li></ul></div><p></p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>To change the default configurations you have to pass the <code>layerManager</code> option with the main configuration object.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">layerManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>You can check here the full list of available configuration options: <a href="https://github.com/artf/grapesjs/blob/master/src/navigator/config/config.ts" target="_blank" rel="noopener noreferrer">Layer Manager Config<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Layers are a direct representation of your components, therefore they will only be available once your components are loaded in the editor (eg. you might load your project data from a remote endpoint).</p> <p>In your configuration, you're able to change the global behavior of layers (eg. make all the layers not sortable) and also decide which component layer should be used as a root.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">layerManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// If the `root` is not specified or the component element is not found,</span>
|
|
<span class="token comment">// the main wrapper component will be used.</span>
|
|
<span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'#my-custom-root'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">sortable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">hidable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>The configurations are mainly targeting the default UI provided by GrapesJS core, in case you need more control over the tree of your layers, you can read more in the <a href="#customization">Customization</a> section below.</p> <h2 id="programmatic-usage"><a href="#programmatic-usage" class="header-anchor">#</a> Programmatic usage</h2> <p>If you need to manage layers programmatically you can use its <a href="/docs/api/layer_manager.html">APIs</a>.</p> <h2 id="customization"><a href="#customization" class="header-anchor">#</a> Customization</h2> <p>By using the <a href="/docs/api/layer_manager.html">Layers API</a> you're able to replace the default UI with your own implementation.</p> <p>All you have to do is to indicate to the editor your intent to use a custom UI and then subscribe to a few events that allow you to properly update your UI.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">layerManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Use this event to append your UI in the default container provided by GrapesJS.</span>
|
|
<span class="token comment">// You can skip this event if you don't rely on the core panels and decide to</span>
|
|
<span class="token comment">// place the UI in some other place.</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'layer:custom'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// props.container (HTMLElement) - The default element where you can append your UI</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Triggered when the root layer is changed.</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'layer:root'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">root</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Update the root of your UI</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Triggered when a component is updated, this allows you to update specific layers.</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'layer:component'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">component</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Update the specific layer of your UI</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>In the example below we'll replicate most of the default functionality with our own implementation.</p> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/L24hkgm5/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>For a complete list of available events, you can check it <a href="/docs/api/layer_manager.html#available-events">here</a>.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Layers.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/12/2022, 1:13:50 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Selectors.html" class="prev">
|
|
Selectors
|
|
</a></span> <span class="next"><a href="/docs/modules/Style-manager.html">
|
|
Style Manager
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.dd84d164.js" defer></script><script src="/docs/assets/js/11.4d9adeab.js" defer></script><script src="/docs/assets/js/2.8548a83e.js" defer></script><script src="/docs/assets/js/68.0a55007b.js" defer></script><script src="/docs/assets/js/17.0f11e6ce.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|