@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true, "plugin_animatecss": false, "plugin_wowjs": false, "plugin_photoswipe": false, "plugin_isotope": false, "plugin_videojs": false }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-search-bar", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Search Bar", "crumbs": "
  • Dashboard
  • UI
  • Search Bar
    • " })
    By default, all pages Con has a search bar. You can use toggle button from top navbar to open it.

    Toggle

    If you want to use custom toggle button, use classname search-bar-toggle like this:

    Open Search Bar 

    <a href="#!" class="btn search-bar-toggle">Open Search Bar</a>

    Content

    You can change default content of search bar.

    <div class="search-bar">
  <form action="#!">
    <!-- Header -->
    <a class="search-bar-toggle grey-text text-darken-2" href="#!"><i class="mdi-navigation-close"></i></a>
    
    <!-- Search Input -->
    <div class="input-field">
      <i class="mdi-action-search prefix"></i>
      <input type="text" name="con-search" placeholder="Type to search...">
    </div>
    
    <h4>Serach results for 'Con'</h4>
    
    <hr>
    <!-- Search Results -->
      <div class="search-results">

        <div class="row">
          <div class="col s12 l4">
            <h4>Users</h4>

            <div class="each-result">
              <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo">
              <div class="title">Felecia Castro</div>
              <div class="label">Content Manager</div>
            </div>

            ...
          </div>
          ...
        </div>

    </div>
  </form>
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })