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/components.html | 131 ++------------------------------------------------- 1 file changed, 4 insertions(+), 127 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 45681e5..547a9fb 100644 --- a/docs/components.html +++ b/docs/components.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.

    -
    - - -
    <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>
-
    - -
    -

    Avatars

    -- cgit v1.3.1-23-gd82d