From c6763ec6d93e5e6b05a153fc6e693c42a7bc5d73 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 16 Jan 2018 18:06:33 +0800 Subject: IMPORTANT: Move Autocomplete to the Experimentals --- docs/experimentals.html | 161 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 157 insertions(+), 4 deletions(-) (limited to 'docs/experimentals.html') diff --git a/docs/experimentals.html b/docs/experimentals.html index b79a8c3..e6f36e3 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -118,9 +118,6 @@
  • Accordions
    • -
  • - Autocomplete -
  • Avatars
    • @@ -220,7 +217,10 @@
    +
    +

    Autocomplete

    +
    +

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

    +
    +
    +
    +
    +
    +
    + + Bruce Banner + +
    + Avatar + Thor Odinson +
    +
    + Avatar + Steve Rogers +
    +
    +
    + Tony Stark +
    + + Natasha Romanoff + + +
    +
    +
    +
    +
    +
    +
    +
    + + Bruce Banner + + + + Thor Odinson + Thor 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 + +
    + Avatar + Thor Odinson +
    +
    + Avatar + Steve 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 chips -->
+    <li class="menu-item">
+      <a href="#">
+        <div class="tile tile-centered">
+          <div class="tile-icon">
+            <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
+          </div>
+          <div class="tile-content">
+            Steve Rogers
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+
    + +
    +

    Calendars

    -- cgit v1.3.1-23-gd82d