<!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 &amp; 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 &amp; 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 &amp; 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">&lt;script&gt;https://cdn.cocreate.app/clone/latest/CoCreate-clone.min.js&lt;/script&gt;</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">&lt;div&gt;&lt;/div&gt;</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>