tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
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.
248 Commits
198 Branches
159 Tags
125 MiB
 
 
 
 
Tree: 71ab39ccb7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '71ab39ccb7'
${ noResults }
grapesjs/docs/api/style_manager.html

121 lines
72 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GrapesJS</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.18.1">
<script src="../js/grapes.min.js?v0.18.1"></script>
<meta name="description" content="GrapesJS documentation">
<link rel="preload" href="/docs/assets/css/0.styles.3b77bb8f.css" as="style"><link rel="preload" href="/docs/assets/js/app.f6ceb853.js" as="script"><link rel="preload" href="/docs/assets/js/11.c4867228.js" as="script"><link rel="preload" href="/docs/assets/js/2.15028157.js" as="script"><link rel="preload" href="/docs/assets/js/55.6eea3a30.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.0eaadd95.js"><link rel="prefetch" href="/docs/assets/js/12.4f724132.js"><link rel="prefetch" href="/docs/assets/js/13.8130e741.js"><link rel="prefetch" href="/docs/assets/js/14.805bfcc5.js"><link rel="prefetch" href="/docs/assets/js/15.2f851491.js"><link rel="prefetch" href="/docs/assets/js/16.fa821c02.js"><link rel="prefetch" href="/docs/assets/js/17.4556dfbe.js"><link rel="prefetch" href="/docs/assets/js/18.4f40ea04.js"><link rel="prefetch" href="/docs/assets/js/19.a8c65aff.js"><link rel="prefetch" href="/docs/assets/js/20.eb810581.js"><link rel="prefetch" href="/docs/assets/js/21.6ee52bc5.js"><link rel="prefetch" href="/docs/assets/js/22.9507d23b.js"><link rel="prefetch" href="/docs/assets/js/23.58ed4097.js"><link rel="prefetch" href="/docs/assets/js/24.88dca6d4.js"><link rel="prefetch" href="/docs/assets/js/25.b1ca5007.js"><link rel="prefetch" href="/docs/assets/js/26.9a241b9b.js"><link rel="prefetch" href="/docs/assets/js/27.716654d0.js"><link rel="prefetch" href="/docs/assets/js/28.10c1e483.js"><link rel="prefetch" href="/docs/assets/js/29.dfc72b5f.js"><link rel="prefetch" href="/docs/assets/js/3.204e4229.js"><link rel="prefetch" href="/docs/assets/js/30.c66e083f.js"><link rel="prefetch" href="/docs/assets/js/31.568d9fb6.js"><link rel="prefetch" href="/docs/assets/js/32.e802b75d.js"><link rel="prefetch" href="/docs/assets/js/33.691a5bb6.js"><link rel="prefetch" href="/docs/assets/js/34.1e5a1c01.js"><link rel="prefetch" href="/docs/assets/js/35.17b11923.js"><link rel="prefetch" href="/docs/assets/js/36.5d629ef2.js"><link rel="prefetch" href="/docs/assets/js/37.e87d0a97.js"><link rel="prefetch" href="/docs/assets/js/38.955d1292.js"><link rel="prefetch" href="/docs/assets/js/39.a07de4ca.js"><link rel="prefetch" href="/docs/assets/js/4.d382fc80.js"><link rel="prefetch" href="/docs/assets/js/40.d4073f81.js"><link rel="prefetch" href="/docs/assets/js/41.829b4578.js"><link rel="prefetch" href="/docs/assets/js/42.ec1740ef.js"><link rel="prefetch" href="/docs/assets/js/43.b2ddcfb0.js"><link rel="prefetch" href="/docs/assets/js/44.545a0016.js"><link rel="prefetch" href="/docs/assets/js/45.671c328f.js"><link rel="prefetch" href="/docs/assets/js/46.d0d8528c.js"><link rel="prefetch" href="/docs/assets/js/47.9ffb6059.js"><link rel="prefetch" href="/docs/assets/js/48.9685aa58.js"><link rel="prefetch" href="/docs/assets/js/49.53dd281f.js"><link rel="prefetch" href="/docs/assets/js/5.8ddecc67.js"><link rel="prefetch" href="/docs/assets/js/50.6ec32cae.js"><link rel="prefetch" href="/docs/assets/js/51.a38128bf.js"><link rel="prefetch" href="/docs/assets/js/52.623efbff.js"><link rel="prefetch" href="/docs/assets/js/53.d4c77b92.js"><link rel="prefetch" href="/docs/assets/js/54.935d1177.js"><link rel="prefetch" href="/docs/assets/js/56.dbde1579.js"><link rel="prefetch" href="/docs/assets/js/57.73ca8622.js"><link rel="prefetch" href="/docs/assets/js/58.411f8503.js"><link rel="prefetch" href="/docs/assets/js/59.cf72de43.js"><link rel="prefetch" href="/docs/assets/js/6.e462c815.js"><link rel="prefetch" href="/docs/assets/js/60.9e38372c.js"><link rel="prefetch" href="/docs/assets/js/61.1c4522b5.js"><link rel="prefetch" href="/docs/assets/js/62.1aab8bfa.js"><link rel="prefetch" href="/docs/assets/js/63.3914fe5b.js"><link rel="prefetch" href="/docs/assets/js/64.d4085390.js"><link rel="prefetch" href="/docs/assets/js/65.9394620d.js"><link rel="prefetch" href="/docs/assets/js/66.ea4f62a4.js"><link rel="prefetch" href="/docs/assets/js/67.5eee6e92.js"><link rel="prefetch" href="/docs/assets/js/68.47bbc1d5.js"><link rel="prefetch" href="/docs/assets/js/69.7509cd19.js"><link rel="prefetch" href="/docs/assets/js/7.47112ec1.js"><link rel="prefetch" href="/docs/assets/js/70.f312d5fd.js"><link rel="prefetch" href="/docs/assets/js/71.69b98d16.js"><link rel="prefetch" href="/docs/assets/js/72.e105e3d7.js"><link rel="prefetch" href="/docs/assets/js/8.8ef598af.js"><link rel="prefetch" href="/docs/assets/js/9.7dc718fa.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.3b77bb8f.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 router-link-active">
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 router-link-active">
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/api/" aria-current="page" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/frame.html" class="sidebar-link"> ‍ ‍ ‍ Frame</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/asset.html" class="sidebar-link"> ‍ ‍ ‍ Asset</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/block.html" class="sidebar-link"> ‍ ‍ ‍ Block</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> ‍ ‍ ‍ Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/api/page.html" class="sidebar-link"> ‍ ‍ ‍ Page</a></li><li><a href="/docs/api/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/api/style_manager.html#stylemanager" class="sidebar-link">StyleManager</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#available-events" class="sidebar-link">Available Events</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addsector" class="sidebar-link">addSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsector" class="sidebar-link">getSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getsectors" class="sidebar-link">getSectors</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removesector" class="sidebar-link">removeSector</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addproperty" class="sidebar-link">addProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperty" class="sidebar-link">getProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getproperties" class="sidebar-link">getProperties</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#removeproperty" class="sidebar-link">removeProperty</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#select" class="sidebar-link">select</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getselected" class="sidebar-link">getSelected</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getselectedall" class="sidebar-link">getSelectedAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getselectedparents" class="sidebar-link">getSelectedParents</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addstyletargets" class="sidebar-link">addStyleTargets</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getbuiltin" class="sidebar-link">getBuiltIn</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#getbuiltinall" class="sidebar-link">getBuiltInAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addbuiltin" class="sidebar-link">addBuiltIn</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#addtype" class="sidebar-link">addType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettype" class="sidebar-link">getType</a></li><li class="sidebar-sub-header"><a href="/docs/api/style_manager.html#gettypes" class="sidebar-link">getTypes</a></li></ul></li><li><a href="/docs/api/sector.html" class="sidebar-link"> ‍ ‍ ‍ Sector</a></li><li><a href="/docs/api/property.html" class="sidebar-link"> ‍ ‍ ‍ Property</a></li><li><a href="/docs/api/property_number.html" class="sidebar-link"> ‍ ‍ ‍ PropertyNumber</a></li><li><a href="/docs/api/property_select.html" class="sidebar-link"> ‍ ‍ ‍ PropertySelect</a></li><li><a href="/docs/api/property_composite.html" class="sidebar-link"> ‍ ‍ ‍ PropertyComposite</a></li><li><a href="/docs/api/property_stack.html" class="sidebar-link"> ‍ ‍ ‍ PropertyStack</a></li><li><a href="/docs/api/layer.html" class="sidebar-link"> ‍ ‍ ‍ Layer</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/device.html" class="sidebar-link"> ‍ ‍ ‍ Device</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/selector.html" class="sidebar-link"> ‍ ‍ ‍ Selector</a></li><li><a href="/docs/api/state.html" class="sidebar-link"> ‍ ‍ ‍ State</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/css_rule.html" class="sidebar-link"> ‍ ‍ ‍ CssRule</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li><li><a href="/docs/api/parser.html" class="sidebar-link">Parser</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="stylemanager"><a href="#stylemanager" class="header-anchor">#</a> StyleManager</h2> <p>With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<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> <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>
styleManager<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// options</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Listen to events</span>
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'style:sector:add'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">sector</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</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 comment">// Use the API</span>
<span class="token keyword">const</span> styleManager <span class="token operator">=</span> editor<span class="token punctuation">.</span>StyleManager<span class="token punctuation">;</span>
styleManager<span class="token punctuation">.</span><span class="token function">addSector</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="available-events"><a href="#available-events" class="header-anchor">#</a> Available Events</h2> <ul><li><code>style:sector:add</code> - Sector added. The <a href="/docs/api/sector.html">Sector</a> is passed as an argument to the callback.</li> <li><code>style:sector:remove</code> - Sector removed. The <a href="/docs/api/sector.html">Sector</a> is passed as an argument to the callback.</li> <li><code>style:sector:update</code> - Sector updated. The <a href="/docs/api/sector.html">Sector</a> and the object containing changes are passed as arguments to the callback.</li> <li><code>style:property:add</code> - Property added. The <a href="/docs/api/property.html">Property</a> is passed as an argument to the callback.</li> <li><code>style:property:remove</code> - Property removed. The <a href="/docs/api/property.html">Property</a> is passed as an argument to the callback.</li> <li><code>style:property:update</code> - Property updated. The <a href="/docs/api/property.html">Property</a> and the object containing changes are passed as arguments to the callback.</li> <li><code>style:target</code> - Target selection changed. The target (or <code>null</code> in case the target is deselected) is passed as an argument to the callback.</li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <ul><li><a href="#getconfig">getConfig</a></li> <li><a href="#addsector">addSector</a></li> <li><a href="#getsector">getSector</a></li> <li><a href="#getsectors">getSectors</a></li> <li><a href="#removesector">removeSector</a></li> <li><a href="#addproperty">addProperty</a></li> <li><a href="#getproperty">getProperty</a></li> <li><a href="#getproperties">getProperties</a></li> <li><a href="#removeproperty">removeProperty</a></li> <li><a href="#select">select</a></li> <li><a href="#getselected">getSelected</a></li> <li><a href="#getselectedall">getSelectedAll</a></li> <li><a href="#getselectedparents">getSelectedParents</a></li> <li><a href="#addstyletargets">addStyleTargets</a></li> <li><a href="#getbuiltin">getBuiltIn</a></li> <li><a href="#getbuiltinall">getBuiltInAll</a></li> <li><a href="#addbuiltin">addBuiltIn</a></li> <li><a href="#addtype">addType</a></li> <li><a href="#gettype">getType</a></li> <li><a href="#gettypes">getTypes</a></li></ul> <h2 id="getconfig"><a href="#getconfig" class="header-anchor">#</a> getConfig</h2> <p>Get configuration object</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong></p> <h2 id="addsector"><a href="#addsector" class="header-anchor">#</a> addSector</h2> <p>Add new sector. If the sector with the same id already exists, that one will be returned.</p> <h3 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id</p></li> <li><p><code>sector</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Sector definition. Check the <a href="/docs/api/sector.html#properties">available properties</a></p></li> <li><p><code>options</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Options (optional, default <code>{}</code>)</p> <ul><li><code>options.at</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<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>?</strong> Position index (by default, will be appended at the end).</li></ul></li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> sector <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">addSector</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'My sector'</span><span class="token punctuation">,</span>
open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
properties<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'My 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> at<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// With `at: 0` we place the new sector at the beginning of the list</span>
</code></pre></div><p>Returns <strong><a href="/docs/api/sector.html">Sector</a></strong> Added Sector</p> <h2 id="getsector"><a href="#getsector" class="header-anchor">#</a> getSector</h2> <p>Get sector by id.</p> <h3 id="parameters-2"><a href="#parameters-2" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id</li> <li><code>opts</code> (optional, default <code>{}</code>)</li></ul> <h3 id="examples-2"><a href="#examples-2" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> sector <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">getSector</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(<a href="/docs/api/sector.html">Sector</a> | null)</strong></p> <h2 id="getsectors"><a href="#getsectors" class="header-anchor">#</a> getSectors</h2> <p>Get all sectors.</p> <h3 id="parameters-3"><a href="#parameters-3" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Options (optional, default <code>{}</code>)</p> <ul><li><code>opts.visible</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<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>?</strong> Returns only visible sectors</li></ul></li></ul> <h3 id="examples-3"><a href="#examples-3" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> sectors <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">getSectors</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<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>&lt;<a href="/docs/api/sector.html">Sector</a>&gt;</strong></p> <h2 id="removesector"><a href="#removesector" class="header-anchor">#</a> removeSector</h2> <p>Remove sector by id.</p> <h3 id="parameters-4"><a href="#parameters-4" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id</li></ul> <h3 id="examples-4"><a href="#examples-4" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> removed <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">removeSector</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong><a href="/docs/api/sector.html">Sector</a></strong> Removed sector</p> <h2 id="addproperty"><a href="#addproperty" class="header-anchor">#</a> addProperty</h2> <p>Add new property to the sector.</p> <h3 id="parameters-5"><a href="#parameters-5" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>sectorId</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id.</p></li> <li><p><code>property</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Property definition. Check the <a href="/docs/api/property.html#properties">base available properties</a> + others based on the <code>type</code> of your property.</p></li> <li><p><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Options (optional, default <code>{}</code>)</p> <ul><li><code>opts.at</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<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>?</strong> Position index (by default, will be appended at the end).</li></ul></li></ul> <h3 id="examples-5"><a href="#examples-5" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> property <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">addProperty</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> <span class="token string">'Minimum height'</span><span class="token punctuation">,</span>
property<span class="token operator">:</span> <span class="token string">'min-height'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'100'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'200px'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'200'</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> at<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(<a href="/docs/api/property.html">Property</a> | null)</strong> Added property or <code>null</code> in case the sector doesn't exist.</p> <h2 id="getproperty"><a href="#getproperty" class="header-anchor">#</a> getProperty</h2> <p>Get the property.</p> <h3 id="parameters-6"><a href="#parameters-6" class="header-anchor">#</a> Parameters</h3> <ul><li><code>sectorId</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id.</li> <li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Property id.</li></ul> <h3 id="examples-6"><a href="#examples-6" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> property <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">getProperty</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(<a href="/docs/api/property.html">Property</a> | null)</strong></p> <h2 id="getproperties"><a href="#getproperties" class="header-anchor">#</a> getProperties</h2> <p>Get all properties of the sector.</p> <h3 id="parameters-7"><a href="#parameters-7" class="header-anchor">#</a> Parameters</h3> <ul><li><code>sectorId</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id.</li></ul> <h3 id="examples-7"><a href="#examples-7" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> properties <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">getProperties</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(Collection&lt;<a href="/docs/api/property.html">Property</a>&gt; | null)</strong> Collection of properties</p> <h2 id="removeproperty"><a href="#removeproperty" class="header-anchor">#</a> removeProperty</h2> <p>Remove the property.</p> <h3 id="parameters-8"><a href="#parameters-8" class="header-anchor">#</a> Parameters</h3> <ul><li><code>sectorId</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Sector id.</li> <li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Property id.</li></ul> <h3 id="examples-8"><a href="#examples-8" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> property <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">removeProperty</span><span class="token punctuation">(</span><span class="token string">'mySector'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(<a href="/docs/api/property.html">Property</a> | null)</strong> Removed property</p> <h2 id="select"><a href="#select" class="header-anchor">#</a> select</h2> <p>Select new target.
The target could be a Component, CSSRule, or a CSS selector string.</p> <h3 id="parameters-9"><a href="#parameters-9" class="header-anchor">#</a> Parameters</h3> <ul><li><code>target</code> <strong>(<a href="/docs/api/component.html">Component</a> | <a href="/docs/api/css_rule.html">CSSRule</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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>)</strong></li> <li><code>opts</code> (optional, default <code>{}</code>)</li></ul> <h3 id="examples-9"><a href="#examples-9" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><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">&amp;&amp;</span> styleManager<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</span>
styleManager<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.btn &gt; span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<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>&lt;(<a href="/docs/api/component.html">Component</a> | <a href="/docs/api/css_rule.html">CSSRule</a>)&gt;</strong> Array containing selected Components or CSSRules</p> <h2 id="getselected"><a href="#getselected" class="header-anchor">#</a> getSelected</h2> <p>Get the last selected target.
By default, the Style Manager shows styles of the last selected target.</p> <p>Returns <strong>(<a href="/docs/api/component.html">Component</a> | <a href="/docs/api/css_rule.html">CSSRule</a> | null)</strong></p> <h2 id="getselectedall"><a href="#getselectedall" class="header-anchor">#</a> getSelectedAll</h2> <p>Get the array of selected targets.</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<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>&lt;(<a href="/docs/api/component.html">Component</a> | <a href="/docs/api/css_rule.html">CSSRule</a>)&gt;</strong></p> <h2 id="getselectedparents"><a href="#getselectedparents" class="header-anchor">#</a> getSelectedParents</h2> <p>Get parent rules of the last selected target.</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<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>&lt;<a href="/docs/api/css_rule.html">CSSRule</a>&gt;</strong></p> <h2 id="addstyletargets"><a href="#addstyletargets" class="header-anchor">#</a> addStyleTargets</h2> <p>Update selected targets with a custom style.</p> <h3 id="parameters-10"><a href="#parameters-10" class="header-anchor">#</a> Parameters</h3> <ul><li><code>style</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Style object</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Options (optional, default <code>{}</code>)</li></ul> <h3 id="examples-10"><a href="#examples-10" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>styleManager<span class="token punctuation">.</span><span class="token function">addStyleTargets</span><span class="token punctuation">(</span><span class="token punctuation">{</span> color<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="getbuiltin"><a href="#getbuiltin" class="header-anchor">#</a> getBuiltIn</h2> <p>Return built-in property definition</p> <h3 id="parameters-11"><a href="#parameters-11" class="header-anchor">#</a> Parameters</h3> <ul><li><code>prop</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Property name.</li></ul> <h3 id="examples-11"><a href="#examples-11" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> widthPropDefinition <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">getBuiltIn</span><span class="token punctuation">(</span><span class="token string">'width'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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> | null)</strong> Property definition.</p> <h2 id="getbuiltinall"><a href="#getbuiltinall" class="header-anchor">#</a> getBuiltInAll</h2> <p>Get all the available built-in property definitions.</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong></p> <h2 id="addbuiltin"><a href="#addbuiltin" class="header-anchor">#</a> addBuiltIn</h2> <p>Add built-in property definition.
If the property exists already, it will extend it.</p> <h3 id="parameters-12"><a href="#parameters-12" class="header-anchor">#</a> Parameters</h3> <ul><li><code>prop</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<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></strong> Property name.</li> <li><code>definition</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Property definition.</li></ul> <h3 id="examples-12"><a href="#examples-12" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> sector <span class="token operator">=</span> styleManager<span class="token punctuation">.</span><span class="token function">addBuiltIn</span><span class="token punctuation">(</span><span class="token string">'new-property'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'Some label'</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>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Added property definition.</p> <h2 id="addtype"><a href="#addtype" class="header-anchor">#</a> addType</h2> <p>Add new property type</p> <h3 id="parameters-13"><a href="#parameters-13" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<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></strong> Type ID</li> <li><code>definition</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Definition of the type.</li></ul> <h3 id="examples-13"><a href="#examples-13" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>styleManager<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'my-custom-prop'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment">// Create UI</span>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> props<span class="token punctuation">,</span> change <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'&lt;input type=&quot;range&quot; class=&quot;my-input&quot; min=&quot;10&quot; max=&quot;50&quot;/&gt;'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> inputEl <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.my-input'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
inputEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=&gt;</span> <span class="token function">change</span><span class="token punctuation">(</span><span class="token punctuation">{</span> event <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
inputEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=&gt;</span> <span class="token function">change</span><span class="token punctuation">(</span><span class="token punctuation">{</span> event<span class="token punctuation">,</span> partial<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> el<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// Propagate UI changes up to the targets</span>
<span class="token function">emit</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> props<span class="token punctuation">,</span> updateStyle <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> event<span class="token punctuation">,</span> partial <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span> <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
<span class="token function">updateStyle</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> partial <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">// Update UI (eg. when the target is changed)</span>
<span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> value<span class="token punctuation">,</span> el <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
el<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.my-input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token number">10</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">// Clean the memory from side effects if necessary (eg. global event listeners, etc.)</span>
<span class="token function">destroy</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="gettype"><a href="#gettype" class="header-anchor">#</a> getType</h2> <p>Get type</p> <h3 id="parameters-14"><a href="#parameters-14" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<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></strong> Type ID</li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<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></strong> Type definition</p> <h2 id="gettypes"><a href="#gettypes" class="header-anchor">#</a> getTypes</h2> <p>Get all types</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<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></strong></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/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">1/14/2022, 2:47:08 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/api/page.html" class="prev">
‍ ‍ ‍ Page
</a></span> <span class="next"><a href="/docs/api/sector.html">
‍ ‍ ‍ Sector
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.f6ceb853.js" defer></script><script src="/docs/assets/js/11.c4867228.js" defer></script><script src="/docs/assets/js/2.15028157.js" defer></script><script src="/docs/assets/js/55.6eea3a30.js" defer></script>
</body>
</html>