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.
87 lines
40 KiB
87 lines
40 KiB
<!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/30.c66e083f.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/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/55.6eea3a30.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" class="sidebar-link">Style Manager</a></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" aria-current="page" class="active sidebar-link">CSS Composer</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#csscomposer" class="sidebar-link">CssComposer</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#addrules" class="sidebar-link">addRules</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#setrule" class="sidebar-link">setRule</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getrule" class="sidebar-link">getRule</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#getrules" class="sidebar-link">getRules</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#remove" class="sidebar-link">remove</a></li><li class="sidebar-sub-header"><a href="/docs/api/css_composer.html#clear" class="sidebar-link">clear</a></li></ul></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="csscomposer"><a href="#csscomposer" class="header-anchor">#</a> CssComposer</h2> <p>This module manages CSS rules in the canvas.
|
|
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/css_composer/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>
|
|
cssComposer<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. 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 keyword">const</span> css <span class="token operator">=</span> editor<span class="token punctuation">.</span>Css<span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><a href="#addrules">addRules</a></li> <li><a href="#setrule">setRule</a></li> <li><a href="#getrule">getRule</a></li> <li><a href="#getrules">getRules</a></li> <li><a href="#remove">remove</a></li> <li><a href="#clear">clear</a></li></ul> <h2 id="addrules"><a href="#addrules" class="header-anchor">#</a> addRules</h2> <p>Add CssRules via CSS string.</p> <h3 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h3> <ul><li><code>css</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> CSS string of rules to add.</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> addedRules <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">addRules</span><span class="token punctuation">(</span><span class="token string">'.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Check rules</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>addedRules<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">rule</span> <span class="token operator">=></span> rule<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 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><<a href="/docs/api/css_rule.html">CssRule</a>></strong> Array of rules</p> <h2 id="setrule"><a href="#setrule" class="header-anchor">#</a> setRule</h2> <p>Add/update the CssRule.</p> <h3 id="parameters-2"><a href="#parameters-2" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>selectors</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> Selector string, eg. <code>.myclass</code></p></li> <li><p><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 properties and values</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> Additional properties (optional, default <code>{}</code>)</p> <ul><li><code>opts.atRuleType</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> At-rule type, eg. <code>media</code> (optional, default <code>''</code>)</li> <li><code>opts.atRuleParams</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> At-rule parameters, eg. <code>(min-width: 500px)</code> (optional, default <code>''</code>)</li></ul></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 comment">// Simple class-based rule</span>
|
|
<span class="token keyword">const</span> rule <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">setRule</span><span class="token punctuation">(</span><span class="token string">'.class1.class2'</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>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rule<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 comment">// output: .class1.class2 { color: red }</span>
|
|
<span class="token comment">// With state and other mixed selector</span>
|
|
<span class="token keyword">const</span> rule <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">setRule</span><span class="token punctuation">(</span><span class="token string">'.class1.class2:hover, div#myid'</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>
|
|
<span class="token comment">// output: .class1.class2:hover, div#myid { color: red }</span>
|
|
<span class="token comment">// With media</span>
|
|
<span class="token keyword">const</span> rule <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">setRule</span><span class="token punctuation">(</span><span class="token string">'.class1:hover'</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>
|
|
atRuleType<span class="token operator">:</span> <span class="token string">'media'</span><span class="token punctuation">,</span>
|
|
atRuleParams<span class="token operator">:</span> <span class="token string">'(min-width: 500px)'</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">// output: @media (min-width: 500px) { .class1:hover { color: red } }</span>
|
|
</code></pre></div><p>Returns <strong><a href="/docs/api/css_rule.html">CssRule</a></strong> The new/updated CssRule</p> <h2 id="getrule"><a href="#getrule" class="header-anchor">#</a> getRule</h2> <p>Get the CssRule.</p> <h3 id="parameters-3"><a href="#parameters-3" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>selectors</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> Selector string, eg. <code>.myclass:hover</code></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> Additional properties (optional, default <code>{}</code>)</p> <ul><li><code>opts.atRuleType</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> At-rule type, eg. <code>media</code> (optional, default <code>''</code>)</li> <li><code>opts.atRuleParams</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> At-rule parameters, eg. '(min-width: 500px)' (optional, default <code>''</code>)</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> rule <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">getRule</span><span class="token punctuation">(</span><span class="token string">'.myclass1:hover'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> rule2 <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">getRule</span><span class="token punctuation">(</span><span class="token string">'.myclass1:hover, div#myid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> rule3 <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">getRule</span><span class="token punctuation">(</span><span class="token string">'.myclass1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
atRuleType<span class="token operator">:</span> <span class="token string">'media'</span><span class="token punctuation">,</span>
|
|
atRuleParams<span class="token operator">:</span> <span class="token string">'(min-width: 500px)'</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="/docs/api/css_rule.html">CssRule</a></strong></p> <h2 id="getrules"><a href="#getrules" class="header-anchor">#</a> getRules</h2> <p>Get all rules or filtered by a matching selector.</p> <h3 id="parameters-4"><a href="#parameters-4" class="header-anchor">#</a> Parameters</h3> <ul><li><code>selector</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> Selector, eg. <code>.myclass</code> (optional, default <code>''</code>)</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 comment">// Take all the component specific rules</span>
|
|
<span class="token keyword">const</span> id <span class="token operator">=</span> someComponent<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> rules <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">getRules</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rules<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">rule</span> <span class="token operator">=></span> rule<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">// All rules in the project</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>css<span class="token punctuation">.</span><span class="token function">getRules</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><<a href="/docs/api/css_rule.html">CssRule</a>></strong></p> <h2 id="remove"><a href="#remove" class="header-anchor">#</a> remove</h2> <p>Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like <code>@media</code>)</p> <h3 id="parameters-5"><a href="#parameters-5" class="header-anchor">#</a> Parameters</h3> <ul><li><code>rule</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> | <a href="/docs/api/css_rule.html">CssRule</a> | <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><<a href="/docs/api/css_rule.html">CssRule</a>>)</strong> CssRule or matching selector.</li> <li><code>opts</code></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 comment">// Remove by CssRule</span>
|
|
<span class="token keyword">const</span> toRemove <span class="token operator">=</span> css<span class="token punctuation">.</span><span class="token function">getRules</span><span class="token punctuation">(</span><span class="token string">'.my-cls'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
css<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>toRemove<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Remove by selector</span>
|
|
css<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'.my-cls-2'</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><<a href="/docs/api/css_rule.html">CssRule</a>></strong> Removed rules</p> <h2 id="clear"><a href="#clear" class="header-anchor">#</a> clear</h2> <p>Remove all rules</p> <h3 id="parameters-6"><a href="#parameters-6" class="header-anchor">#</a> Parameters</h3> <ul><li><code>opts</code> (optional, default <code>{}</code>)</li></ul> <p>Returns <strong>this</strong></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/css_composer.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/10/2022, 5:39:16 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/api/state.html" class="prev">
|
|
State
|
|
</a></span> <span class="next"><a href="/docs/api/css_rule.html">
|
|
CssRule
|
|
</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/30.c66e083f.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|