@cocreate/file-server
Version:
A simple file-server component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
229 lines (219 loc) • 6.93 kB
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-file-server Documentation | CoCreateJS</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<meta
name="description"
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
<meta
name="keywords"
content="helper classes, utility classes, css framework, css library, inline style classes" />
<meta name="robots" content="index,follow" />
<!-- CoCreate CSS CDN -->
</head>
<body>
<div array="" object="" key="" id="cocreate-file-server">
<div
class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
<div class="display:flex align-items:center">
<h2>CoCreate-file-server</h2>
</div>
<div
class="display:flex align-items:center font-size:20px"
share-height="600"
share-width="500"
share-media="https://via.placeholder.com/300/09f/fff.png">
<a
href="https://github.com/CoCreate-app/CoCreate-file-server"
target="_blank"
class="margin-right:15px"
><i class="fab fa-github"></i
></a>
<a
class="margin-right:15px share"
share-network="twitter"
title="Share on twitter"
><i class="fab fa-twitter"></i
></a>
<a
class="margin-right:15px share"
share-network="facebook"
title="Share on Facebook"
><i class="fab fa-facebook"></i
></a>
<a
class="margin-right:15px share"
share-network="instagram"
title="Share on instagram"
><i class="fab fa-instagram"></i
></a>
<a
class="margin-right:15px share"
share-network="share"
title="Share on share"
><i class="fas fa-share-alt"></i
></a>
</div>
</div>
<h1 class="max-width:500px margin:20px_10px">
A simple HTML5, CSS and pure javascript component. Easy
configuration using data-attributes and highly styleable.
</h1>
<div id="file-server-section" class="display:flex flex-wrap:wrap">
<div class="flex-grow:1 width:300px padding:20px_10px">
<h2
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
Install
</h2>
<pre
class="margin-top:15px"><code class="language-javascript">npm install cocreate-file-server</code></pre>
<p class="padding:10px_0px">Or you can use cdn link:</p>
<pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-file-server.min.js</code></pre>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Usage
</h2>
<p class="padding:10px_0px">file-server usage content</p>
<pre><code class="language-html"><div></div></code></pre>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Reference
</h2>
<p class="padding:10px_0px">
This is file-server reference content
</p>
<pre><code class="language-javascript"><div></div></code></pre>
<p class="padding:10px_0px">
This is file-server reference content
</p>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Attributes
</h2>
<ul class="list-style-type:none">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>file-server</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>file-server-attribute</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>file-server</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>file-server-attribute</p>
</li>
</ul>
</div>
<div
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
<!-- SandBox -->
<h2
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
Demo
</h2>
<div
class="position:sticky top:0 padding:10px_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="playground">
<div
id="demo-code"
resizable
class="position:relative height:50%">
<textarea
type="code"
lang="html"
array="demos"
object=""
key="demo"
save="false"
id="demo"
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
<div
resize="bottom"
class="background:lightgrey"></div>
</div>
<div
id="demo-preview"
class="position:relative overflow:auto background-color:white">
<div
get-value="#demo"
class="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-query="#demo-code"
><i class="far fa-eye"></i
></a>
<a
class="margin-right:10px"
hidden
id="eye-slash"
show="#eye, #demo-preview"
hide="#eye-slash"
toggle="code-height"
toggle-query="#demo-code"
><i class="fas fa-eye-slash"></i
></a>
<a
class="margin-right:10px"
id="code"
show="#code-slash"
hide="#code, #demo-code"
><i class="fa fa-code"></i
></a>
<a
class="margin-right:10px"
hidden
id="code-slash"
show="#code, #demo-code"
hide="#code-slash"
><i class="fas fa-code"></i
></a>
<a
class="margin-right:5px"
fullscreen
target="#playground"
><i class="fas fa-expand"></i
></a>
</div>
</div>
<!-- End SandBox -->
</div>
</div>
</div>
</div>
<!--CoCreateJS-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>