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.
372 lines
81 KiB
372 lines
81 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Style Manager | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.2c61df29.css" as="style"><link rel="preload" href="/docs/assets/js/app.424ab1f7.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/93.0d4acb59.js" as="script"><link rel="preload" href="/docs/assets/js/33.1b7b6b41.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.d9e75a94.js"><link rel="prefetch" href="/docs/assets/js/24.96337353.js"><link rel="prefetch" href="/docs/assets/js/25.fe03e194.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.bdeec887.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/34.2a27db4f.js"><link rel="prefetch" href="/docs/assets/js/35.4c1b458d.js"><link rel="prefetch" href="/docs/assets/js/36.80ac7652.js"><link rel="prefetch" href="/docs/assets/js/37.a813e6f1.js"><link rel="prefetch" href="/docs/assets/js/38.b5848cbf.js"><link rel="prefetch" href="/docs/assets/js/39.ac3b74a5.js"><link rel="prefetch" href="/docs/assets/js/40.0fad8f56.js"><link rel="prefetch" href="/docs/assets/js/41.725a5d92.js"><link rel="prefetch" href="/docs/assets/js/42.34d5f071.js"><link rel="prefetch" href="/docs/assets/js/43.49e4b43f.js"><link rel="prefetch" href="/docs/assets/js/44.dcce613b.js"><link rel="prefetch" href="/docs/assets/js/45.851c5425.js"><link rel="prefetch" href="/docs/assets/js/46.61478c36.js"><link rel="prefetch" href="/docs/assets/js/47.3743426b.js"><link rel="prefetch" href="/docs/assets/js/48.f36e3619.js"><link rel="prefetch" href="/docs/assets/js/49.4692ff79.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.92c87e88.js"><link rel="prefetch" href="/docs/assets/js/51.6c005fbf.js"><link rel="prefetch" href="/docs/assets/js/52.ede5d238.js"><link rel="prefetch" href="/docs/assets/js/53.14d8e525.js"><link rel="prefetch" href="/docs/assets/js/54.e4f036ef.js"><link rel="prefetch" href="/docs/assets/js/55.510d4705.js"><link rel="prefetch" href="/docs/assets/js/56.96abc2ed.js"><link rel="prefetch" href="/docs/assets/js/57.5452e0eb.js"><link rel="prefetch" href="/docs/assets/js/58.659c993f.js"><link rel="prefetch" href="/docs/assets/js/59.34f9eaca.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.2f610937.js"><link rel="prefetch" href="/docs/assets/js/61.f4e5be3d.js"><link rel="prefetch" href="/docs/assets/js/62.c1df51fe.js"><link rel="prefetch" href="/docs/assets/js/63.0486448b.js"><link rel="prefetch" href="/docs/assets/js/64.1b7300e4.js"><link rel="prefetch" href="/docs/assets/js/65.624d0a0a.js"><link rel="prefetch" href="/docs/assets/js/66.7fe4797b.js"><link rel="prefetch" href="/docs/assets/js/67.925c35aa.js"><link rel="prefetch" href="/docs/assets/js/68.31c90117.js"><link rel="prefetch" href="/docs/assets/js/69.5f040bea.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.6f1ee486.js"><link rel="prefetch" href="/docs/assets/js/71.cbc449e7.js"><link rel="prefetch" href="/docs/assets/js/72.e0d79003.js"><link rel="prefetch" href="/docs/assets/js/73.ca348e41.js"><link rel="prefetch" href="/docs/assets/js/74.0f693fad.js"><link rel="prefetch" href="/docs/assets/js/75.435fb2cb.js"><link rel="prefetch" href="/docs/assets/js/76.05d616a1.js"><link rel="prefetch" href="/docs/assets/js/77.9cf43035.js"><link rel="prefetch" href="/docs/assets/js/78.1139cca5.js"><link rel="prefetch" href="/docs/assets/js/79.4581c86c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.e8ee32b0.js"><link rel="prefetch" href="/docs/assets/js/81.afcc1145.js"><link rel="prefetch" href="/docs/assets/js/82.3c8f4a16.js"><link rel="prefetch" href="/docs/assets/js/83.4c69a7a0.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.584a0e94.js"><link rel="prefetch" href="/docs/assets/js/86.a3fa56ac.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.b2f8cd57.js"><link rel="prefetch" href="/docs/assets/js/89.12fa0df4.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.383ffdcc.js"><link rel="prefetch" href="/docs/assets/js/91.b721141c.js"><link rel="prefetch" href="/docs/assets/js/92.7e85069f.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.2c61df29.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" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/modules/Style-manager.html" aria-current="page" class="active sidebar-link">Style Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#initialization" class="sidebar-link">Initialization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#i18n" class="sidebar-link">I18n</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#component-constraints" class="sidebar-link">Component constraints</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#programmatic-usage" class="sidebar-link">Programmatic usage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#customization" class="sidebar-link">Customization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Style-manager.html#events" class="sidebar-link">Events</a></li></ul></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="style-manager"><a href="#style-manager" class="header-anchor">#</a> Style Manager</h1> <p align="center"><img src="/docs/style-manager.jpg" alt="GrapesJS - Style Manager"></p> <p>The Style Manager module is responsible to show and update style properties relative to your <a href="/docs/modules/Components.html">Components</a>. In this guide, you will see how to setup and take full advantage of the built-in Style Manager UI in GrapesJS.
|
|
The default UI is a lightweight component with built-in properties, but as you'll see next in this guide, it's easy to extend with your own elements or even create the Style Manager UI from scratch by using the <a href="/docs/api/style_manager.html">Style Manager API</a>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>To get a better understanding of the content in this guide, we recommend reading <a href="/docs/modules/Components.html">Components</a> first</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide is referring to GrapesJS v0.18.1 or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#initialization">Initialization</a><ul><li><a href="#sector-definitions">Sector definitions</a></li><li><a href="#property-definitions">Property definitions</a></li></ul></li><li><a href="#i18n">I18n</a></li><li><a href="#component-constraints">Component constraints</a></li><li><a href="#programmatic-usage">Programmatic usage</a></li><li><a href="#customization">Customization</a><ul><li><a href="#adding-new-types">Adding new types</a></li><li><a href="#custom-style-manager">Custom Style Manager</a></li></ul></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>styleManager</code> property 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">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</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 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>Check the full list of available options here: <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/style_manager/config/config.ts" target="_blank" rel="noopener noreferrer">Style 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> <h2 id="initialization"><a href="#initialization" class="header-anchor">#</a> Initialization</h2> <p>The Style Manager module is organized in sectors where each sector contains a list of properties to display. The default Style Manager configuration contains already a list of default common property styles and you can use them by simply skipping the <code>styleManagerConfig.sectors</code> option.</p> <div class="language-js extra-class"><pre class="language-js"><code>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">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// With no defined sectors, the default list will be loaded</span>
|
|
<span class="token comment">// sectors: [...],</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><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>It makes sense to show the Style Manager UI only when you have at least one component selected, so by default the Style Manager is hidden if there are no selected components.</p></div> <h3 id="sector-definitions"><a href="#sector-definitions" class="header-anchor">#</a> Sector definitions</h3> <p>Each sector is identified by its <code>name</code> and a list of <code>properties</code> to display. You can also specify the <code>id</code> in order to access the sector via API (if not indicated it will be generated from the <code>name</code>) and the default <code>open</code> state.</p> <div class="language-js extra-class"><pre class="language-js"><code>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">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// id: 'first-sector', // Id generated from the name</span>
|
|
<span class="token comment">// open: true, // The sector is open by default</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// render it closed by default</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Second sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</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><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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="property-definitions"><a href="#property-definitions" class="header-anchor">#</a> Property definitions</h3> <p>Once you have defined your sector you can start adding property definitions inside <code>properties</code>. Each property has a common set of options (<code>label</code>, <code>default</code>, etc.) and others specific by their <code>type</code>.</p> <p>Let's see below a simple definition for controlling the padding style.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// Default options</span>
|
|
<span class="token comment">// id: 'padding', // The id of the property, if missing, will be the same as `property` value</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Padding'</span><span class="token punctuation">,</span> <span class="token comment">// Label for the property</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'padding'</span><span class="token punctuation">,</span> <span class="token comment">// CSS property to change</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token comment">// Default value to display</span>
|
|
<span class="token comment">// Additonal `number` options</span>
|
|
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Units (available only for the 'number' type)</span>
|
|
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Min value (available only for the 'number' type)</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 punctuation">]</span>
|
|
</code></pre></div><p>This will render the number input UI and will change the <code>padding</code> CSS property on the selected component.</p> <p>The flexibility of the definition allows you to create easily different UI inputs for any possible CSS property. You're free to decide what will be the best UI for your users. If you take for example a numeric property like <code>font-size</code>, you can follow its CSS specification and define it as a <code>number</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Font size'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">,</span> <span class="token string">'em'</span><span class="token punctuation">,</span> <span class="token string">'rem'</span><span class="token punctuation">,</span> <span class="token string">'vh'</span><span class="token punctuation">,</span> <span class="token string">'vw'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>or you can decide to show it as a <code>select</code> and make available only a defined set of values (eg. based on your Design System tokens).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Font size'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'0.7rem'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'small'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'medium'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1.2rem'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'large'</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>Each type defines the specific UI view and a model on how to handle inputs and updates.
|
|
Let's see below the list of all available default types with their relative UI and models.</p> <h4 id="default-types"><a href="#default-types" class="header-anchor">#</a> Default types</h4> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Each <strong>Model</strong> describes more in detail available props and their usage.</p></div> <ul><li><p><code>base</code> - The base type, renders as a simple text input field. <strong>Model</strong>: <a href="/docs/api/property.html">Property</a></p> <img src="/docs/sm-base-type.jpg"> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// type: 'base', // Omitting the type in definition will fallback to the 'base'</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'some-css-property'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Base type'</span><span class="token punctuation">,</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'Default value'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
</code></pre></div></li> <li><p><code>color</code> - Same props as <code>base</code> but the UI is a color picker. <strong>Model</strong>: <a href="/docs/api/property.html">Property</a></p> <img src="/docs/sm-type-color.jpg"></li> <li><p><code>number</code> - Number input field for numeric values. <strong>Model</strong>: <a href="/docs/api/property_number.html">PropertyNumber</a></p> <img src="/docs/sm-type-number.jpg"> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Number type'</span><span class="token punctuation">,</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0%'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Additional props</span>
|
|
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
</code></pre></div></li> <li><p><code>slider</code> - Same props as <code>number</code> but the UI is a slider. <strong>Model</strong>: <a href="/docs/api/property_number.html">PropertyNumber</a></p> <img src="/docs/sm-type-slider.jpg"></li> <li><p><code>select</code> - Select input with options. <strong>Model</strong>: <a href="/docs/api/property_select.html">PropertySelect</a></p> <img src="/docs/sm-type-select.jpg"> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'display'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Select type'</span><span class="token punctuation">,</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Additional props</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Block'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'inline'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Inline'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'None'</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></li> <li><p><code>radio</code> - Same props as <code>select</code> but the UI is a radio button. <strong>Model</strong>: <a href="/docs/api/property_select.html">PropertySelect</a></p> <img src="/docs/sm-type-radio.jpg"></li> <li><p><code>composite</code> - This type is great for CSS shorthand properties, where the final value is a composition of multiple sub properties. <strong>Model</strong>: <a href="/docs/api/property_composite.html">PropertyComposite</a></p> <img src="/docs/sm-type-composite.jpg"> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'composite'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'margin'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Composite type'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Additional props</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'margin-top'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'margin-right'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'margin-bottom'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'margin-left'</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></li> <li><p><code>stack</code> - This type is great for CSS multiple properties like <code>text-shadow</code>, <code>box-shadow</code>, <code>transform</code>, etc. <strong>Model</strong>: <a href="/docs/api/property_stack.html">PropertyStack</a></p> <img src="/docs/sm-type-stack.jpg"> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Example</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'stack'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'text-shadow'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Stack type'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Additional props</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'x'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'y'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'color'</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></li></ul> <h4 id="built-in-properties"><a href="#built-in-properties" class="header-anchor">#</a> Built-in properties</h4> <p>In order to speed up the Style Manager configuration, GrapesJS is shipped with a set of already defined common CSS properties which you can reuse and extend.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// Pass the built-in CSS property as a string</span>
|
|
<span class="token string">'width'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'min-width'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Extend the built-in property with your props</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token string">'max-width'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</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">// If the property doesn't exist it will be converted to a base type</span>
|
|
<span class="token string">'unknown-property'</span> <span class="token comment">// -> { type: 'base', property: 'unknown-property' }</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><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You can check if the property is available by running</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">.</span><span class="token function">getBuiltIn</span><span class="token punctuation">(</span><span class="token string">'property-name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>or get the list of all available properties with</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">.</span><span class="token function">getBuiltInAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <h2 id="i18n"><a href="#i18n" class="header-anchor">#</a> I18n</h2> <p>If you're planning to have a multi-language editor you can easily connect sector and property labels to the <a href="/docs/modules/I18n.html">I18n</a> module via their IDs.</p> <div class="language-js extra-class"><pre class="language-js"><code>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 literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'first-sector-id'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// You can leave the name as a fallback in case the i18n definition is missing</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">'width'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'display-prop-id'</span><span class="token punctuation">,</span> <span class="token comment">// By default the id is the same as its property name</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Display'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'display'</span><span class="token punctuation">,</span>
|
|
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Block'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'inline'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Inline'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'None'</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 punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</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 literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Use `messagesAdd` in order to extend the default set</span>
|
|
<span class="token literal-property property">messagesAdd</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string-property property">'first-sector-id'</span><span class="token operator">:</span> <span class="token string">'First sector EN'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'Width EN'</span><span class="token punctuation">,</span>
|
|
<span class="token string-property property">'display-prop-id'</span><span class="token operator">:</span> <span class="token string">'Display EN'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string-property property">'display-prop-id'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">'Block EN'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token string">'Inline EN'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">none</span><span class="token operator">:</span> <span class="token string">'None EN'</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 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 punctuation">;</span>
|
|
</code></pre></div><h2 id="component-constraints"><a href="#component-constraints" class="header-anchor">#</a> Component constraints</h2> <p>When you define custom components you can also indicate, via <code>stylable</code> and <code>unstylable</code> props, which CSS properties should be available for styling. In that case, the Style Manager will only show the available properties. If the sector doesn't contain any available property, it won't be shown.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">customComponents</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Component A</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'cmp-a'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// When this component is selected, the Style Manager will show only the following properties</span>
|
|
<span class="token literal-property property">stylable</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'height'</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 punctuation">;</span>
|
|
<span class="token comment">// Component B</span>
|
|
editor<span class="token punctuation">.</span>Components<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'cmp-b'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// When this component is selected, the Style Manager will hide the following properties</span>
|
|
<span class="token literal-property property">unstylable</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'color'</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 punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</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">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>customComponents<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'cmp-a'</span><span class="token punctuation">,</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">'Component A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'cmp-b'</span><span class="token punctuation">,</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">'Component B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-width'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</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 punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Second sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token string">'font-size'</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 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 punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="programmatic-usage"><a href="#programmatic-usage" class="header-anchor">#</a> Programmatic usage</h2> <p>For a more advanced usage you can rely on the <a href="/docs/api/style_manager.html">Style Manager API</a> to perform different kind of actions related to the module.</p> <ul><li><p>Managing sectors/properties post-initialization.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the module from the editor instance</span>
|
|
<span class="token keyword">const</span> sm <span class="token operator">=</span> editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Add new sector</span>
|
|
<span class="token keyword">const</span> newSector <span class="token operator">=</span> sm<span class="token punctuation">.</span><span class="token function">addSector</span><span class="token punctuation">(</span><span class="token string">'sector-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'New sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'width'</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">// Add new property to the sector</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">addProperty</span><span class="token punctuation">(</span><span class="token string">'sector-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'min-width'</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">// Remove sector</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">removeSector</span><span class="token punctuation">(</span><span class="token string">'sector-id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></li> <li><p>Managing selected targets.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Select the first button in the current page</span>
|
|
<span class="token keyword">const</span> wrapperCmp <span class="token operator">=</span> editor<span class="token punctuation">.</span>Pages<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMainComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> btnCmp <span class="token operator">=</span> wrapperCmp<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
btnCmp <span class="token operator">&&</span> sm<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>btnCmp<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Set as a target the CSS selector (the relative CSSRule will be created if doesn't exist yet)</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.btn > span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Get the last selected target</span>
|
|
<span class="token keyword">const</span> lastTarget <span class="token operator">=</span> sm<span class="token punctuation">.</span><span class="token function">getLastSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
lastTarget<span class="token operator">?.</span>toCSS <span class="token operator">&&</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastTarget<span class="token punctuation">.</span><span class="token function">toCSS</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">// Update selected targets with a custom style</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">addStyleTargets</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></li> <li><p>Adding/extending built-in property definitions.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">myPlugin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">.</span><span class="token function">addBuiltIn</span><span class="token punctuation">(</span><span class="token string">'new-prop'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'New prop'</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>
|
|
|
|
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">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'My sector'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'new-prop'</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>
|
|
<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 punctuation">)</span>
|
|
</code></pre></div></li> <li><p><a href="#adding-new-types">Adding new types</a>.</p></li></ul> <h2 id="customization"><a href="#customization" class="header-anchor">#</a> Customization</h2> <p>The default types should cover most of the common styling properties but in case you need a more advanced control over styling you can define your own types or even create a completely custom Style Manager UI from scratch.</p> <h3 id="adding-new-types"><a href="#adding-new-types" class="header-anchor">#</a> Adding new types</h3> <p>In order to add a new type you have to use the <code>styleManager.addType</code> API call and indicate all the necessary methods to make it work properly with the editor. Here an example of implementation by using the native <code>range</code> input.</p> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/y1mxv6p5/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <h3 id="custom-style-manager"><a href="#custom-style-manager" class="header-anchor">#</a> Custom Style Manager</h3> <p>In case you need a completely custom Style Manager UI (eg. you have to use your UI components), you can create it from scratch by relying on the same sector/propriety architecture or even interfacing directly with selected targets.</p> <p>All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the <code>style:custom</code> event that will let you know when is the right moment to create/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">styleManager</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>
|
|
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'style:custom'</span><span class="token punctuation">,</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// props.container (HTMLElement)</span>
|
|
<span class="token comment">// The default element where you can append your</span>
|
|
<span class="token comment">// custom UI in order to render it in the default position.</span>
|
|
|
|
<span class="token comment">// Here you would put the logic to render/update your UI by relying on Style Manager API</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Here an example below of a custom Style Manager UI rendered by using Vuetify (Vue Material components) and relying on the default sector/propriety state architecture via API.</p> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/46kf7brn/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p>From the example above you can notice how we subscribe to <code>style:custom</code> and update <code>this.sectors = sm.getSectors({ visible: true });</code> on each trigger, and this is enough for the framework to update the rest of the template automatically.</p> <p>In case you need to get/update the selected style targets directly, you can also rely on these APIs.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the module from the editor instance</span>
|
|
<span class="token keyword">const</span> sm <span class="token operator">=</span> editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Select the first button in the current page</span>
|
|
<span class="token keyword">const</span> wrapperCmp <span class="token operator">=</span> editor<span class="token punctuation">.</span>Pages<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMainComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> btnCmp <span class="token operator">=</span> wrapperCmp<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
btnCmp <span class="token operator">&&</span> sm<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>btnCmp<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// You can also select CSS query as a target</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.btn > span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Once the target is selected, you can check its current style object</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sm<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">getStyle</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">// and update all selected target styles when necessary</span>
|
|
sm<span class="token punctuation">.</span><span class="token function">addStyleTargets</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div> <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/style_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/Style-manager.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">3/11/2023, 3:47:09 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Pages.html" class="prev">
|
|
Pages
|
|
</a></span> <span class="next"><a href="/docs/modules/Storage.html">
|
|
Storage Manager
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.424ab1f7.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/93.0d4acb59.js" defer></script><script src="/docs/assets/js/33.1b7b6b41.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|