diff options
1 files changed, 0 insertions, 119 deletions
| -rw-r--r-- | docs/src/contents/autocomplete.pug | 119 |
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug deleted file mode 100644 index ca5eb17..0000000 --- a/docs/src/contents/autocomplete.pug +++ /dev/null @@ -1,119 +0,0 @@ -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>
\ No newline at end of file |