@cocreate/floating-label
Version:
A floating label design for inputs, textarea, select and any custom component. Creates beautiful form labels that float over form fields. Add class floating-label to see the magic. Easily configured using HTML5 attributes and/or JavaScript API.
112 lines (100 loc) • 3.5 kB
HTML
<html lang="en">
<head>
<title>Floating Labels | CoCreateJS</title>
<!-- CoCreate Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<!-- CoCreate CSS CDN -->
<link
rel="stylesheet"
href="https://cdn.cocreate.app/floating-label/latest/CoCreate-floating-label.min.css"
type="text/css" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<form class="margin:20px" array="module_activities" realtime="false">
<floating-label>
<input
type="text"
array="module_activities"
object=""
key="text"
placeholder="Text"
class="floating-label" />
</floating-label>
<input
type="color"
array="module_activities"
object=""
key="color"
placeholder="Color"
class="floating-label" />
<input
type="search"
array="module_activities"
object=""
key="search"
placeholder="Search"
class="floating-label" />
<input
type="date"
array="module_activities"
object=""
key="date"
placeholder="Date"
class="floating-label" />
<input
type="time"
array="module_activities"
object=""
key="time"
placeholder="Time"
class="floating-label" />
<input
type="datetime-local"
array="module_activities"
object=""
key="datetime-local"
placeholder="Date time"
class="floating-label" />
<textarea
array="module_activities"
object=""
key="textarea"
placeholder="Textarea"
class="floating-label">
</textarea>
<select
multiple
array="module_activities"
object=""
key="select-multiple"
placeholder="Select Multiple"
class="floating-label">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select
array="module_activities"
object="5edda7608d5c7a7d656edecd"
key="select"
placeholder="Select"
class="floating-label">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button
class="submitBtn position:fixed bottom:15px right:15px bg-blue grow-hover round">
<i src="/assets/svg/save.svg"></i>
</button>
</form>
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
<script src="../dist/CoCreate-floating-label.js"></script>
</body>
</html>