diff options
add autocomplete input and new chip code
1 files changed, 88 insertions, 10 deletions
| -rw-r--r-- | index.html | 98 |
@@ -71,8 +71,8 @@ <li>flexbox, responsive and mobile-friendly layout</li> <li>carefully designed elements</li> <li>built in useful components and utilities</li> - <li>patterns and html templates (soon)</li> - <li>email templates (soon)</li> + <li>patterns and html templates <span class="label label-success">soon</span></li> + <li>email templates <span class="label label-success">soon</span></li> </ul> </section> <section class="notes text-center"> @@ -923,42 +923,120 @@ </section> <div class="columns"> <div class="column"> - <div class="chip"> + <div class="chip-sm"> <span class="chip-name">Crime</span> <button class="btn btn-clear"></button> </div> - <div class="chip"> + <div class="chip-sm"> <span class="icon icon-favorite_border"></span> <span class="chip-name">Drama</span> <button class="btn btn-clear"></button> </div> - <div class="chip"> + <div class="chip-sm"> <span class="chip-name">Biography</span> <button class="btn btn-clear"></button> </div> - <div class="chip"> + <div class="chip-sm"> <span class="chip-name">Mystery</span> <button class="btn btn-clear"></button> </div> </div> <div class="column"> - <div class="chip"> + <div class="chip-sm"> <img src="demo/img/avatar-1.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> - <div class="chip"> + <div class="chip-sm"> <img src="demo/img/avatar-2.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> - <div class="chip"> + <div class="chip-sm"> <img src="demo/img/avatar-4.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> </div> </div> + <div class="columns"> + <div class="column col-6"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input"> + <div class="chip-sm"> + <img src="demo/img/avatar-1.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip-sm"> + <img src="demo/img/avatar-2.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip-sm"> + <img src="demo/img/avatar-4.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <input class="form-input" type="text" placeholder="start typing " /> + </div> + </div> + </div> + </div> + <div class="column col-6"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input"> + <div class="chip-sm"> + <img src="demo/img/avatar-1.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip-sm"> + <img src="demo/img/avatar-2.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip-sm"> + <img src="demo/img/avatar-4.png" class="avatar" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <input class="form-input" type="text" placeholder="start typing " /> + </div> + <ul class="form-autocomplete-list"> + <li class="chip"> + <div class="chip-list-icon"> + <img src="demo/img/avatar-4.png" class="avatar" /> + </div> + <div class="chip-list-content"> + Pablo Diego José Francisco de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso + </div> + <div class="chip-list-action"> + <button class="btn btn-link"> + <i class="icon icon-message"></i> + </button> + </div> + </li> + <li class="chip"> + <div class="chip-list-icon"> + <img src="demo/img/avatar-2.png" class="avatar" /> + </div> + <div class="chip-list-content"> + Yan Zhu + </div> + <div class="chip-list-action"> + <button class="btn btn-link"> + <i class="icon icon-message"></i> + </button> + </div> + </li> + </ul> + </div> + </div> + </div> + </div> <section class="notes"> <p>Add a container element with the class <code class="label">chip</code>. And add child text elements with <code class="label">chip-name</code> or icons with <code class="label">icon</code>.</p> </section> @@ -1919,7 +1997,7 @@ <footer class="bg-grey"> <section id="copyright" class="grid-footer grid-960"> <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.9 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.10 </p> <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </section> |