@ -9,9 +9,9 @@
< link rel = "stylesheet" href = "https://grapesjs.com/stylesheets/grapes.min.css?v0.21.3" > < link rel = "stylesheet" href = "https://grapesjs.com/stylesheets/grapes.min.css?v0.21.3" >
< script src = "https://grapesjs.com/js/grapes.min.js?v0.21.3" > < / script > < script src = "https://grapesjs.com/js/grapes.min.js?v0.21.3" > < / script >
< meta name = "description" content = "GrapesJS documentation" > < meta name = "description" content = "GrapesJS documentation" >
< link rel = "preload" href = "/docs/assets/css/0.styles.50c9bd6e .css" as = "style" > < link rel = "preload" href = "/docs/assets/js/app.d418137e .js" as = "script" > < link rel = "preload" href = "/docs/assets/js/11.adf7a43b.js" as = "script" > < link rel = "preload" href = "/docs/assets/js/2.4c0c3ea0.js" as = "script" > < link rel = "preload" href = "/docs/assets/js/43.8e7ae4b2 .js" as = "script" > < link rel = "prefetch" href = "/docs/assets/js/10.69a363d4 .js" > < link rel = "prefetch" href = "/docs/assets/js/12.37ccff72.js" > < link rel = "prefetch" href = "/docs/assets/js/13.df82b59d.js" > < link rel = "prefetch" href = "/docs/assets/js/14.c521a84f.js" > < link rel = "prefetch" href = "/docs/assets/js/15.37c4019b.js" > < link rel = "prefetch" href = "/docs/assets/js/16.7faad3bc.js" > < link rel = "prefetch" href = "/docs/assets/js/17.ea24d88c .js" > < link rel = "prefetch" href = "/docs/assets/js/18.90365c6c.js" > < link rel = "prefetch" href = "/docs/assets/js/19.c4bbf5c7 .js" > < link rel = "prefetch" href = "/docs/assets/js/20.a4463a0 e.js" > < link rel = "prefetch" href = "/docs/assets/js/21.b7447ee2 .js" > < link rel = "prefetch" href = "/docs/assets/js/22.26514c5c.js" > < link rel = "prefetch" href = "/docs/assets/js/23.39e7b521.js" > < link rel = "prefetch" href = "/docs/assets/js/24.d4985faf.js" > < link rel = "prefetch" href = "/docs/assets/js/25.9149f15a.js" > < link rel = "prefetch" href = "/docs/assets/js/26.b18b9017.js" > < link rel = "prefetch" href = "/docs/assets/js/27.fa704ea7.js" > < link rel = "prefetch" href = "/docs/assets/js/28.908d623d.js" > < link rel = "prefetch" href = "/docs/assets/js/29.2cba25b1 .js" > < link rel = "prefetch" href = "/docs/assets/js/3.1b6a24ff .js" > < link rel = "prefetch" href = "/docs/assets/js/30.7dde24e8 .js" > < link rel = "prefetch" href = "/docs/assets/js/31.3d1598b4.js" > < link rel = "prefetch" href = "/docs/assets/js/32.946df9d6.js" > < link rel = "prefetch" href = "/docs/assets/js/33.c529e41c.js" > < link rel = "prefetch" href = "/docs/assets/js/34.8d97e671.js" > < link rel = "prefetch" href = "/docs/assets/js/35.6c32ed92.js" > < link rel = "prefetch" href = "/docs/assets/js/36.4f083cb3.js" > < link rel = "prefetch" href = "/docs/assets/js/37.c9b01ea4 .js" > < link rel = "prefetch" href = "/docs/assets/js/38.912ab2ff.js" > < link rel = "prefetch" href = "/docs/assets/js/39.90d7de38 .js" > < link rel = "prefetch" href = "/docs/assets/js/4.1e707a3e .js" > < link rel = "prefetch" href = "/docs/assets/js/40.342fec8e .js" > < link rel = "prefetch" href = "/docs/assets/js/41.bc7ee3a4 .js" > < link rel = "prefetch" href = "/docs/assets/js/42.5482ae5b .js" > < link rel = "prefetch" href = "/docs/assets/js/44.4bb0253a.js" > < link rel = "prefetch" href = "/docs/assets/js/45.7c6b443c.js" > < link rel = "prefetch" href = "/docs/assets/js/46.0b2447b7.js" > < link rel = "prefetch" href = "/docs/assets/js/47.cd7e4ded.js" > < link rel = "prefetch" href = "/docs/assets/js/48.479ed474.js" > < link rel = "prefetch" href = "/docs/assets/js/49.fa27c7eb.js" > < link rel = "prefetch" href = "/docs/assets/js/5.991a0cfb.js" > < link rel = "prefetch" href = "/docs/assets/js/50.fabdc69d .js" > < link rel = "prefetch" href = "/docs/assets/js/51.33f4b762.js" > < link rel = "prefetch" href = "/docs/assets/js/52.84b33650.js" > < link rel = "prefetch" href = "/docs/assets/js/53.023015a1.js" > < link rel = "prefetch" href = "/docs/assets/js/54.549bf15f.js" > < link rel = "prefetch" href = "/docs/assets/js/55.1db71850.js" > < link rel = "prefetch" href = "/docs/assets/js/56.a29c41be.js" > < link rel = "prefetch" href = "/docs/assets/js/57.fc6f179e.js" > < link rel = "prefetch" href = "/docs/assets/js/58.f75671fc.js" > < link rel = "prefetch" href = "/docs/assets/js/59.1bd143e7 .js" > < link rel = "prefetch" href = "/docs/assets/js/6.a32345ea.js" > < link rel = "prefetch" href = "/docs/assets/js/60.19e2faa4 .js" > < link rel = "prefetch" href = "/docs/assets/js/61.4992205a .js" > < link rel = "prefetch" href = "/docs/assets/js/62.11a90a77.js" > < link rel = "prefetch" href = "/docs/assets/js/63.47fb638b.js" > < link rel = "prefetch" href = "/docs/assets/js/64.b95d55b0 .js" > < link rel = "prefetch" href = "/docs/assets/js/65.0aac3633.js" > < link rel = "prefetch" href = "/docs/assets/js/66.be30b2b5 .js" > < link rel = "prefetch" href = "/docs/assets/js/67.205dc106 .js" > < link rel = "prefetch" href = "/docs/assets/js/68.9f38900c .js" > < link rel = "prefetch" href = "/docs/assets/js/69.9f096a2e .js" > < link rel = "prefetch" href = "/docs/assets/js/7.da9eb872.js" > < link rel = "prefetch" href = "/docs/assets/js/70.2c4cc4f9.js" > < link rel = "prefetch" href = "/docs/assets/js/71.748ff316 .js" > < link rel = "prefetch" href = "/docs/assets/js/72.54e5eccf .js" > < link rel = "prefetch" href = "/docs/assets/js/73.3b7c5aaf .js" > < link rel = "prefetch" href = "/docs/assets/js/74.e93f473e .js" > < link rel = "prefetch" href = "/docs/assets/js/75.511ec7fa.js" > < link rel = "prefetch" href = "/docs/assets/js/8.f7e1dda0.js" > < link rel = "prefetch" href = "/docs/assets/js/9.5b5d16e9 .js" > < link rel = "preload" href = "/docs/assets/css/0.styles.32dd05eb .css" as = "style" > < link rel = "preload" href = "/docs/assets/js/app.ba9172c7 .js" as = "script" > < link rel = "preload" href = "/docs/assets/js/11.adf7a43b.js" as = "script" > < link rel = "preload" href = "/docs/assets/js/2.4c0c3ea0.js" as = "script" > < link rel = "preload" href = "/docs/assets/js/43.3af54110 .js" as = "script" > < link rel = "prefetch" href = "/docs/assets/js/10.05b95c77 .js" > < link rel = "prefetch" href = "/docs/assets/js/12.37ccff72.js" > < link rel = "prefetch" href = "/docs/assets/js/13.df82b59d.js" > < link rel = "prefetch" href = "/docs/assets/js/14.c521a84f.js" > < link rel = "prefetch" href = "/docs/assets/js/15.37c4019b.js" > < link rel = "prefetch" href = "/docs/assets/js/16.7faad3bc.js" > < link rel = "prefetch" href = "/docs/assets/js/17.5f6a9bbf .js" > < link rel = "prefetch" href = "/docs/assets/js/18.90365c6c.js" > < link rel = "prefetch" href = "/docs/assets/js/19.0bb4ff63 .js" > < link rel = "prefetch" href = "/docs/assets/js/20.ef873495 .js" > < link rel = "prefetch" href = "/docs/assets/js/21.efd14401 .js" > < link rel = "prefetch" href = "/docs/assets/js/22.26514c5c.js" > < link rel = "prefetch" href = "/docs/assets/js/23.39e7b521.js" > < link rel = "prefetch" href = "/docs/assets/js/24.d4985faf.js" > < link rel = "prefetch" href = "/docs/assets/js/25.9149f15a.js" > < link rel = "prefetch" href = "/docs/assets/js/26.b18b9017.js" > < link rel = "prefetch" href = "/docs/assets/js/27.fa704ea7.js" > < link rel = "prefetch" href = "/docs/assets/js/28.908d623d.js" > < link rel = "prefetch" href = "/docs/assets/js/29.d274cb22 .js" > < link rel = "prefetch" href = "/docs/assets/js/3.3f07d756 .js" > < link rel = "prefetch" href = "/docs/assets/js/30.3c62e149 .js" > < link rel = "prefetch" href = "/docs/assets/js/31.3d1598b4.js" > < link rel = "prefetch" href = "/docs/assets/js/32.946df9d6.js" > < link rel = "prefetch" href = "/docs/assets/js/33.c529e41c.js" > < link rel = "prefetch" href = "/docs/assets/js/34.8d97e671.js" > < link rel = "prefetch" href = "/docs/assets/js/35.6c32ed92.js" > < link rel = "prefetch" href = "/docs/assets/js/36.4f083cb3.js" > < link rel = "prefetch" href = "/docs/assets/js/37.4f1f8803 .js" > < link rel = "prefetch" href = "/docs/assets/js/38.912ab2ff.js" > < link rel = "prefetch" href = "/docs/assets/js/39.af2d09f7 .js" > < link rel = "prefetch" href = "/docs/assets/js/4.5609c62f .js" > < link rel = "prefetch" href = "/docs/assets/js/40.7fce0940 .js" > < link rel = "prefetch" href = "/docs/assets/js/41.c4c31c4b .js" > < link rel = "prefetch" href = "/docs/assets/js/42.cbfb2a40 .js" > < link rel = "prefetch" href = "/docs/assets/js/44.4bb0253a.js" > < link rel = "prefetch" href = "/docs/assets/js/45.7c6b443c.js" > < link rel = "prefetch" href = "/docs/assets/js/46.0b2447b7.js" > < link rel = "prefetch" href = "/docs/assets/js/47.cd7e4ded.js" > < link rel = "prefetch" href = "/docs/assets/js/48.479ed474.js" > < link rel = "prefetch" href = "/docs/assets/js/49.fa27c7eb.js" > < link rel = "prefetch" href = "/docs/assets/js/5.991a0cfb.js" > < link rel = "prefetch" href = "/docs/assets/js/50.81973ca2 .js" > < link rel = "prefetch" href = "/docs/assets/js/51.33f4b762.js" > < link rel = "prefetch" href = "/docs/assets/js/52.84b33650.js" > < link rel = "prefetch" href = "/docs/assets/js/53.023015a1.js" > < link rel = "prefetch" href = "/docs/assets/js/54.549bf15f.js" > < link rel = "prefetch" href = "/docs/assets/js/55.1db71850.js" > < link rel = "prefetch" href = "/docs/assets/js/56.a29c41be.js" > < link rel = "prefetch" href = "/docs/assets/js/57.fc6f179e.js" > < link rel = "prefetch" href = "/docs/assets/js/58.f75671fc.js" > < link rel = "prefetch" href = "/docs/assets/js/59.da2cd0a5 .js" > < link rel = "prefetch" href = "/docs/assets/js/6.a32345ea.js" > < link rel = "prefetch" href = "/docs/assets/js/60.b5776bb 1.js" > < link rel = "prefetch" href = "/docs/assets/js/61.bdc05af6 .js" > < link rel = "prefetch" href = "/docs/assets/js/62.11a90a77.js" > < link rel = "prefetch" href = "/docs/assets/js/63.47fb638b.js" > < link rel = "prefetch" href = "/docs/assets/js/64.fece784c .js" > < link rel = "prefetch" href = "/docs/assets/js/65.0aac3633.js" > < link rel = "prefetch" href = "/docs/assets/js/66.6c008632 .js" > < link rel = "prefetch" href = "/docs/assets/js/67.2ef5fe5b .js" > < link rel = "prefetch" href = "/docs/assets/js/68.5a35dc22 .js" > < link rel = "prefetch" href = "/docs/assets/js/69.4225cd13 .js" > < link rel = "prefetch" href = "/docs/assets/js/7.da9eb872.js" > < link rel = "prefetch" href = "/docs/assets/js/70.2c4cc4f9.js" > < link rel = "prefetch" href = "/docs/assets/js/71.08d94d67 .js" > < link rel = "prefetch" href = "/docs/assets/js/72.61e42432 .js" > < link rel = "prefetch" href = "/docs/assets/js/73.a85eb1d4 .js" > < link rel = "prefetch" href = "/docs/assets/js/74.3c8d7c01 .js" > < link rel = "prefetch" href = "/docs/assets/js/75.511ec7fa.js" > < link rel = "prefetch" href = "/docs/assets/js/8.f7e1dda0.js" > < link rel = "prefetch" href = "/docs/assets/js/9.7654a35f .js" >
< link rel = "stylesheet" href = "/docs/assets/css/0.styles.50c9bd6e .css" > < link rel = "stylesheet" href = "/docs/assets/css/0.styles.32dd05eb .css" >
< / head > < / head >
< body > < 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" > < 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" >
@ -40,20 +40,18 @@
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > }< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span >
< / code > < / pre > < / div > < p > 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 > panelManager < span class = "token operator" > =< / span > editor< span class = "token punctuation" > .< / span > Panels< 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 > panelManager < span class = "token operator" > =< / span > editor< span class = "token punctuation" > .< / span > Panels< span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < ul > < li > < a href = "#addpanel" > addPanel< / a > < / li > < li > < a href = "#addbutton" > addButton< / a > < / li > < li > < a href = "#getbutton" > getButton< / a > < / li > < li > < a href = "#getpanel" > getPanel< / a > < / li > < li > < a href = "#getpanels" > getPanels< / a > < / li > < li > < a href = "#getpanelsel" > getPanelsEl< / a > < / li > < li > < a href = "#removepanel" > removePanel< / a > < / li > < li > < a href = "#removebutton" > removeButton< / a > < / li > < / ul > < h2 id = "getpanels" > < a href = "#getpanels" class = "header-anchor" > #< / a > getPanels< / h2 > < p > Returns the collection of panels< / p > < p > Returns < strong > Collection< / strong > Collection of panel< / p > < h2 id = "getpanelsel" > < a href = "#getpanelsel" class = "header-anchor" > #< / a > getPanelsEl< / h2 > < p > Returns panels element< / p > < p > Returns < strong > < a href = "https://developer.mozilla.org/docs/Web/HTML/Element" target = "_blank" rel = "noopener noreferrer" > HTMLElement< 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 = "addpanel" > < a href = "#addpanel" class = "header-anchor" > #< / a > addPanel< / h2 > < p > Add new panel to the collection< / p > < h3 id = "parameters" > < a href = "#parameters" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panel< / 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 > | Panel)< / strong > Object with right properties or an instance of Panel< / 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" > var< / span > newPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > addPanel< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > {< / span > < / code > < / pre > < / div > < ul > < li > < a href = "#addpanel" > addPanel< / a > < / li > < li > < a href = "#addbutton" > addButton< / a > < / li > < li > < a href = "#getbutton" > getButton< / a > < / li > < li > < a href = "#getpanel" > getPanel< / a > < / li > < li > < a href = "#getpanels" > getPanels< / a > < / li > < li > < a href = "#getpanelsel" > getPanelsEl< / a > < / li > < li > < a href = "#removepanel" > removePanel< / a > < / li > < li > < a href = "#removebutton" > removeButton< / a > < / li > < / ul > < h2 id = "getpanels" > < a href = "#getpanels" class = "header-anchor" > #< / a > getPanels< / h2 > < p > Returns the collection of panels< / p > < p > Returns < strong > Collection< / strong > Collection of panel< / p > < h2 id = "getpanelsel" > < a href = "#getpanelsel" class = "header-anchor" > #< / a > getPanelsEl< / h2 > < p > Returns panels element< / p > < p > Returns < strong > < a href = "https://developer.mozilla.org/docs/Web/HTML/Element" target = "_blank" rel = "noopener noreferrer" > HTMLElement< 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 = "addpanel" > < a href = "#addpanel" class = "header-anchor" > #< / a > addPanel< / h2 > < p > Add new panel to the collection< / p > < h3 id = "parameters" > < a href = "#parameters" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panel< / 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 > | Panel)< / strong > Object with right properties or an instance of Panel< / 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 > newPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > addPanel< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > {< / span >
< span class = "token literal-property property" > id< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > id< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > visible< / span > < span class = "token operator" > :< / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > visible< / span > < span class = "token operator" > :< / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > buttons< / span > < span class = "token operator" > :< / span > < span class = "token punctuation" > [< / span > < span class = "token operator" > ...< / span > < span class = "token punctuation" > ]< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > buttons< / span > < span class = "token operator" > :< / span > < span class = "token punctuation" > [< / span > < span class = "token operator" > ...< / span > < span class = "token punctuation" > ]< / span > < span class = "token punctuation" > ,< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < p > Returns < strong > Panel< / strong > Added panel. Useful in case passed argument was an Object< / p > < h2 id = "removepanel" > < a href = "#removepanel" class = "header-anchor" > #< / a > removePanel< / h2 > < p > Remove a panel from the collection< / p > < h3 id = "parameters-2" > < a href = "#parameters-2" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panel< / 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 > | Panel | < 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 > Object with right properties or an instance of Panel or Painel id< / 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 > newPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removePanel< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > {< / span >
< span class = "token literal-property property" > id< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > visible< / span > < span class = "token operator" > :< / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > buttons< / span > < span class = "token operator" > :< / span > < span class = "token punctuation" > [< / span > < span class = "token operator" > ...< / span > < span class = "token punctuation" > ]< / span > < span class = "token punctuation" > ,< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span > < 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 > Panel< / strong > Added panel. Useful in case passed argument was an Object< / p > < h2 id = "removepanel" > < a href = "#removepanel" class = "header-anchor" > #< / a > removePanel< / h2 > < p > Remove a panel from the collection< / p > < h3 id = "parameters-2" > < a href = "#parameters-2" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panel< / code > < strong > (Panel | < 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 > Panel instance or panel id< / 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 > somePanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > getPanel< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'somePanel'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > const< / span > removedPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removePanel< / span > < span class = "token punctuation" > (< / span > somePanel< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > const< / span > newPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removePanel< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token comment" > // or by id< / span >
< / code > < / pre > < / div > < p > Returns < strong > Panel< / strong > Removed panel. Useful in case passed argument was an Object< / p > < h2 id = "getpanel" > < a href = "#getpanel" class = "header-anchor" > #< / a > getPanel< / h2 > < p > Get panel by ID< / p > < h3 id = "parameters-3" > < a href = "#parameters-3" 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 > Id string< / 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" > var< / span > myPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > getPanel< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token keyword" > const< / span > removedPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removePanel< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < p > Returns < strong > (Panel | null)< / strong > < / p > < h2 id = "addbutton" > < a href = "#addbutton" class = "header-anchor" > #< / a > addButton< / h2 > < p > Add button to the panel< / p > < h3 id = "parameters-4" > < a href = "#parameters-4" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panelId< / 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 > Panel's ID< / li > < li > < code > button< / 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 > | Button)< / strong > Button object or instance of Button< / 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" > var< / span > newButton < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > addButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > {< / span > < / code > < / pre > < / div > < p > Returns < strong > Panel< / strong > Removed panel< / p > < h2 id = "getpanel" > < a href = "#getpanel" class = "header-anchor" > #< / a > getPanel< / h2 > < p > Get panel by ID< / p > < h3 id = "parameters-3" > < a href = "#parameters-3" 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 > Id string< / 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 > myPanel < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > getPanel< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myPanel'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < p > Returns < strong > (Panel | null)< / strong > < / p > < h2 id = "addbutton" > < a href = "#addbutton" class = "header-anchor" > #< / a > addButton< / h2 > < p > Add button to the panel< / p > < h3 id = "parameters-4" > < a href = "#parameters-4" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panelId< / 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 > Panel's ID< / li > < li > < code > button< / 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 > | Button)< / strong > Button object or instance of Button< / 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 > newButton < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > addButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > {< / span >
< span class = "token literal-property property" > id< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'myNewButton'< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > id< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'myNewButton'< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > className< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'someClass'< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > className< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'someClass'< / span > < span class = "token punctuation" > ,< / span >
< span class = "token literal-property property" > command< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'someCommand'< / span > < span class = "token punctuation" > ,< / span > < span class = "token literal-property property" > command< / span > < span class = "token operator" > :< / span > < span class = "token string" > 'someCommand'< / span > < span class = "token punctuation" > ,< / span >
@ -85,8 +83,8 @@
< 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 keyword" > const< / span > removedButton < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removeButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token string" > 'myNewButton'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token keyword" > const< / span > removedButton < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > removeButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myNewPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token string" > 'myNewButton'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < p > Returns < strong > (Button | null)< / strong > Removed button.< / p > < h2 id = "getbutton" > < a href = "#getbutton" class = "header-anchor" > #< / a > getButton< / h2 > < p > Get button from the panel< / p > < h3 id = "parameters-6" > < a href = "#parameters-6" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panelId< / 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 > Panel's 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 > Button's 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" > var < / span > button < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > getButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token string" > 'myButton'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < / code > < / pre > < / div > < p > Returns < strong > (Button | null)< / strong > Removed button.< / p > < h2 id = "getbutton" > < a href = "#getbutton" class = "header-anchor" > #< / a > getButton< / h2 > < p > Get button from the panel< / p > < h3 id = "parameters-6" > < a href = "#parameters-6" class = "header-anchor" > #< / a > Parameters< / h3 > < ul > < li > < code > panelId< / 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 > Panel's 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 > Button's 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 > button < span class = "token operator" > =< / span > panelManager< span class = "token punctuation" > .< / span > < span class = "token function" > getButton< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > 'myPanel'< / span > < span class = "token punctuation" > ,< / span > < span class = "token string" > 'myButton'< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < p > Returns < strong > (Button | null)< / strong > < / p > < / div > < footer class = "page-edit" > < div class = "edit-link" > < a href = "https://github.com/artf/grapesjs/edit/dev/docs/api/panels.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" > 2/10/2023, 12:10:15 PM< / span > < / div > < / footer > < div class = "page-nav" > < p class = "inner" > < span class = "prev" > < / code > < / pre > < / div > < p > Returns < strong > (Button | null)< / strong > < / p > < / div > < footer class = "page-edit" > < div class = "edit-link" > < a href = "https://github.com/artf/grapesjs/edit/dev/docs/api/panels.md" target = "_blank" rel = "noopener noreferrer" > Edit this page on GitHub< / a > < span > < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" x = "0px" y = "0px" viewBox = "0 0 100 100" width = "15" height = "15" class = "icon outbound" > < path fill = "currentColor" d = "M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" > < / path > < polygon fill = "currentColor" points = "45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" > < / polygon > < / svg > < span class = "sr-only" > (opens new window)< / span > < / span > < / div > < div class = "last-updated" > < span class = "prefix" > Last Updated:< / span > < span class = "time" > 7/4/2023, 4:46:41 PM< / span > < / div > < / footer > < div class = "page-nav" > < p class = "inner" > < span class = "prev" >
← ←
< a href = "/docs/api/component.html" class = "prev" > < a href = "/docs/api/component.html" class = "prev" >
Component Component
@ -95,6 +93,6 @@
< / a > < / a >
→ →
< / span > < / p > < / div > < / main > < / div > < div class = "global-ui" > < / div > < / div > < / span > < / p > < / div > < / main > < / div > < div class = "global-ui" > < / div > < / div >
< script src = "/docs/assets/js/app.d418137e .js" defer > < / script > < script src = "/docs/assets/js/11.adf7a43b.js" defer > < / script > < script src = "/docs/assets/js/2.4c0c3ea0.js" defer > < / script > < script src = "/docs/assets/js/43.8e7ae4b2 .js" defer > < / script > < script src = "/docs/assets/js/app.ba9172c7 .js" defer > < / script > < script src = "/docs/assets/js/11.adf7a43b.js" defer > < / script > < script src = "/docs/assets/js/2.4c0c3ea0.js" defer > < / script > < script src = "/docs/assets/js/43.3af54110 .js" defer > < / script >
< / body > < / body >
< / html > < / html >
Artur Arseniev
3 years ago