diff options
Update old docs to new Pug templates
1 files changed, 119 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/autocomplete.pug | 119 |
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug new file mode 100644 index 0000000..ca93c8a --- /dev/null +++ b/docs/src/contents/autocomplete.pug @@ -0,0 +1,119 @@ +p + | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. + +.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. + +.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 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>
\ No newline at end of file |