Vuetify: text input search inside of toolbar

[dohomi]

Hi,

a search input component would be nice out of the box, which fits into the design of vuetify. Here a small codepen: http://codepen.io/anon/pen/NdZEzX

Missing is currently:

• visual alignment of search icon
• type="search" on v-text-input misses a cancel button to truncate input
• different behaviour on xs devices (show only button and activate the input over the toolbar)

[johnleider]

Added the ability to put a text-field in a toolbar. Using the append/prepend-icon-cb functionality you can also perform a method of your choice when clicked. As far as truncating the text with a displayed X, this will be in the future.

[SidKwok]

@johnleider How am I supposed to make this work? When I add text-field in tool-bars, it behaves like this:

code:

<v-toolbar class="green">
        <v-toolbar-side-icon />
        <v-toolbar-title class="hidden-sm-and-down">Toolbar</v-toolbar-title>
        <v-spacer />
        <v-text-field />
      </v-toolbar>

[johnleider]

This is still on DEV and not released. Information will be available in the docs once it is released.

[SidKwok]

@johnleider GREAT!

[ejektaflex]

@johnleider Could we have an update on this? It was referenced as being part of the v0.10.0 milestone, which was marked as 100% complete, but as far as I can see no docs have been added on this specific functionality.

[dohomi]

@ejektaflex there is a new prop called solo which is what you might look for:

  <v-text-field prepend-icon="search"
                v-model="searchText"
                solo append-icon="cancel" hide-details single-line></v-text-field>

[ejektaflex]

@dohomi That's perfect, thank you.

[jameshhood]

Is there a way to make this clearable but not override any prepend icon? I want the cancle/clear to only show up when there is text in the v-model but why the clearable flag overrides both prepend and append icons I have no idea

[johnleider]

This was a bug fixed recently.

[jameshhood]

@johnleider do you know which version that was fixed in? I'm running 0.15.7 and clearable still shows on both sides of my v-text-field. Even that way in codepen

[johnleider]

https://github.com/vuetifyjs/vuetify/pull/1774

Hasn't been released

[johnleider]

https://github.com/vuetifyjs/vuetify/pull/1774

Hasn't been released

[dphans]

I think you need to add "solo" attribute into <v-text-field> tag inside <v-toolbar>.

For example:

<v-toolbar fixed clipped-left app>
   <v-toolbar-title class="ml-0 pl-3">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <span class="title google_font hidden-xs-only">Title</span>
   </v-toolbar-title>
   <v-spacer class="hidden-xs-only"></v-spacer>
      <v-text-field
         light
         solo
         prepend-icon="search"
         placeholder="Type keyword...">
      </v-text-field>
</v-toolbar>

[KaelWD]

Don't bump old closed issues please.