Merge pull request #522 from picturepan2/0.5.5 v0.5.5

0.5.5

1 files changed, 135 insertions, 0 deletions

diff --git a/docs/src/experimentals/autocomplete.pug b/docs/src/experimentals/autocomplete.pug
new file mode 100644
index 0000000..c112c46
--- /dev/null
+++ b/docs/src/experimentals/autocomplete.pug
@@ -0,0 +1,135 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'autocomplete'
+  - var parent = 'experimentals'
+  - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('autocomplete', 'Autocomplete')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input.is-focused
+              span.chip
+                | Bruce Banner
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              span.chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
+                | Thor Odinson
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              .has-icon-left
+                input.form-input(type="text" placeholder="" value="S")
+                i.form-icon.loading
+            ul.menu
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
+                    .tile-content
+                      mark S
+                      | teve Roger
+                      mark s
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                    .tile-content
+                      | Tony 
+                      mark S
+                      | tark
+
+    p
+      | Add a container element with the #[code form-autocomplete] class.
+      | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
+      | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
+    p
+      | 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.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete.autocomplete-oneline
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <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>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file