<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CoCreate-clone Documentation | CoCreateJS</title> <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico" /> <meta name="description" content="Clone an element by #id, identify targeted elements using html5 attributes. Capable of creating nested & complex cloning logic for kanbans, tasklists etc" /> <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" /> <meta name="robots" content="index,follow" /> <meta property="og:image" content="https://cdn.cocreate.app/docs/clone.png" /> <link rel="stylesheet" href="../index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" /> <link rel="manifest" href="/manifest.webmanifest" /> </head> <body> <!-- Navbar --> <nav class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav," scroll-up="5" scroll-down="5" path="../" src="../components/navbar.html"></nav> <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-selector="[content_id='content']" resize-property="margin-left" resize-value="width"> <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu> <div resize="right"></div> </sidenav> <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-clone"> <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"> <div class="display:flex align-items:center"> <h2>CoCreate-clone</h2> </div> <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"> <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Clone an element by #id, identify targeted elements using html5 attributes. Capable of creating nested & complex cloning logic for kanbans, tasklists etc" share-title="CoCreate Clone" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/clone.png" hover="display:block!important" hover-selector=".social-networks"> <div class="display:none social-networks"> <a class="margin-right:15px" share-network="twitter" title="Share on twitter" ><i src="/assets/svg/twitter.svg"></i ></a> <a class="margin-right:15px" share-network="facebook" title="Share on Facebook" ><i src="/assets/svg/facebook.svg"></i ></a> <a class="margin-right:15px" share-network="instagram" title="Share on instagram" ><i src="/assets/svg/instagram.svg"></i ></a> </div> <a class="margin-right:15px" share-network="share" title="Share on share" ><i src="/assets/svg/share-alt.svg"></i ></a> </div> <a class="margin-right:15px" share-network="share" title="Share on share" ><i src="/assets/svg/share-alt.svg"></i ></a> </div> <a href="https://github.com/CoCreate-app/CoCreate-clone" target="_blank" class="margin-right:15px" ><i src="/assets/svg/github.svg"></i ></a> </div> <p class="max-width:500px margin:20px_10px line-height:1.5"> Clone an html element by #id, identify targeted elements using clone_id="" attribute. Capable of creating nested & complex cloning logic for kanbans, tasklists etc. Easy configuration using HTML5 attributes and/or JavaScript API. </p> <div id="clone-section" class="display:flex flex-wrap:wrap"> <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"> <div id="clone-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#clone-install-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#clone-install']"> <h2 class="padding:5px_0px">Install</h2> <a class="margin-left:10px display:none" href="#clone-install" ><i src="/assets/svg/link.svg"></i ></a> </span> </div> <pre><code class="language-bash">npm i @cocreate/clone</code></pre> <p class="padding:10px_0px line-height:1.5"> Or you can use cdn link: </p> <pre><code class="language-html"><script>https://cdn.cocreate.app/clone/latest/CoCreate-clone.min.js</script></code></pre> <div id="clone-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#clone-usage-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#clone-usage']"> <h2 class="padding:5px_0px">Usage</h2> <a class="margin-left:10px display:none" href="#clone-usage" ><i src="/assets/svg/link.svg"></i ></a> </span> </div> <div class=""> <p class="padding:10px_0px line-height:1.5"> This is clone usage </p> <div class="flex-grow:1 min-width:300px width:100%"> <pre><code class="language-html"><div></div></code></pre> </div> <p class="padding:10px_0px line-height:1.5"> This is clone usage </p> <p class="padding:10px_0px line-height:1.5"> This is clone usage </p> </div> <div id="clone-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#clone-attributes-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#clone-attributes']"> <h2 class="padding:5px_0px">Attributes</h2> <a class="margin-left:10px display:none" href="#clone-attributes" ><i src="/assets/svg/link.svg"></i ></a> </span> </div> <ul class="list-style-type:none"> <li class="padding:15px_0px border-bottom:1px_solid_lightgrey"> <h4> <span>clone</span> <span class="cocreate-badge success" >string</span > <span class="cocreate-badge warning" >optional</span > </h4> <p>clone-attribute</p> </li> <li class="padding:15px_0px border-bottom:1px_solid_lightgrey"> <h4> <span>clone</span> <span class="cocreate-badge success" >string</span > <span class="cocreate-badge warning" >optional</span > </h4> <p>clone-attribute</p> </li> </ul> </div> <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"> <!-- SandBox --> <div id="clone-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#clone-demo-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#clone-demo']"> <h2 class="padding:5px_0px">Demo</h2> <a class="margin-left:10px display:none" href="#clone-demo" ><i src="/assets/svg/link.svg"></i ></a> </span> </div> <div class="position:sticky top:0 padding:15px_0px height:100vh"> <!-- SandBox --> <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="input-playground"> <div id="demo-code" resizable class="position:relative height:450px"> <textarea type="code" lang="html" array="demos" object="" key="demo-code" realtime="false" save="false" id="demo" input-selector=".demopreview" input-attribute="value" input-events="input, onload" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea> <div resize="bottom"></div> </div> <div id="demo-preview" class="position:relative overflow:auto background-color:white height:100%"> <div class="demopreview padding:20px"></div> </div> <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6"> <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code" ><i class="height:18px" src="/assets/svg/eye.svg"></i ></a> <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code" ><i src="/assets/svg/eye-slash.svg"></i ></a> <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code" ><i src="/assets/svg/code.svg"></i ></a> <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash" ><i class="height:18px" src="/assets/svg/code.svg"></i ></a> <a class="margin-right:5px" fullscreen fullscreen-selector="#input-playground"></a> </div> </div> <!-- End SandBox --> </div> </div> </div> <button href="https://github.com/CoCreate-app/CoCreate-clone/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%"> <i src="/assets/svg/pencil-alt.svg"></i> </button> </main> <script src="https://CoCreate.app/dist/CoCreate.js"></script> </body> </html>