From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/experimentals/autocomplete.html | 327 +++++++++++++++++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 docs/experimentals/autocomplete.html (limited to 'docs/experimentals/autocomplete.html') diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html new file mode 100644 index 0000000..72a0f30 --- /dev/null +++ b/docs/experimentals/autocomplete.html @@ -0,0 +1,327 @@ + + + + Autocomplete - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Autocomplete

+
+
+ + + +
+
+ + +
+
+

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

+
+
+
+
+
Bruce Banner +
AvatarThor Odinson
+
AvatarSteve Rogers
+
+
Tony Stark +
Natasha Romanoff + +
+
+
+
+
+
+
+
Bruce BannerThor OdinsonThor Odinson +
+ +
+
+ +
+
+
+
+

Add a container element with the form-autocomplete class. + There are 2 parts of it, one is form-autocomplete-input, another is menu component. + You may add the is-focused class to form-autocomplete-input to make it appear as focus state. +

+

+ Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. + The autocomplete HTML structure is exampled below. +

+
+
+
+
+
Bruce Banner +
AvatarThor Odinson
+
AvatarSteve Rogers
+
+
Tony Stark +
Natasha Romanoff + +
+
+
+
+
+ 
<div class="form-autocomplete">
+  <!-- autocomplete input container -->
+  <div class="form-autocomplete-input form-input">
+
+    <!-- autocomplete chips -->
+    <div class="chip">
+      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
+      Thor Odinson
+      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+    </div>
+
+    <!-- autocomplete real input box -->
+    <input class="form-input" type="text" placeholder="typing here">
+  </div>
+
+  <!-- autocomplete suggestion list -->
+  <ul class="menu">
+    <!-- menu list items -->
+    <li class="menu-item">
+      <a href="#">
+        <div class="tile tile-centered">
+          <div class="tile-icon">
+            ...
+          </div>
+          <div class="tile-content">
+            ...
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d