How can I customize the width of a floating toolbar with search box in vuetify?

Question

I'm a freshman on front-end coding and now trying to use vuetify in my project. I tried several ways to customize the width of the floating toolbar with a search box, referencing the official examples, but failed. I redefined a component with the floating bar and put it in the App as below. Do I have missed anything or I'm just using it in a wrong way? Thank you very much~~:)

<!--SearchBar.vue-->
<template>
      <!--v-flex xs12 sm12 md12-->
      <v-toolbar color="white" floating dense extense>
        <v-flex xs12 sm12 md12>
          <v-text-field hide-details single-line full-width></v-text-field>
        </v-flex>
        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>
      </v-toolbar>
      <!--/v-flex-->
    </template>

<script>
  export default {
    name: 'SearchBar',
    data: () => ({})
  }
</script>

<style scoped>

</style>


<!--App.vue-->
<template>
<v-layout>
  <v-flex xs12 sm12 md12>
    <v-app light>
      <v-navigation-drawer
        temporary
        v-model="drawer"
        enable-resize-watcher
      >
      <main>
        <v-content>
          <v-container fluid>
            <v-slide-y-transition mode="out-in">
              <v-layout column align-center>
                <img src="/public/abxyz.png" alt="Vuetify.js" class="mb-5" />
                <search-bar></search-bar>
              </v-layout>
            </v-slide-y-transition>
          </v-container>
        </v-content>
      </main>
    </v-app>
  </v-flex>
</v-layout>
</template>

<script>
  import SearchBar from './SearchBar.vue'
  export default {
    data: () => {},
    components: {
      SearchBar
    }
  }
</script>

the situation of the bar

Answer 1

Looking through the Vuetify source I'm not seeing a place to modify the toolbar width in javascript. It seems it's handled in the stylus code and is entirely Css driven.

.toolbar
  position: relative
  transition: .3s $transition.swing
  width: 100%
  will-change: padding-left
  elevation(4)

My suggestion would be to do a scoped overwrite of the css property.

<template>
    <!--v-flex xs12 sm12 md12-->
    <v-toolbar color="white" floating dense extense>
        <v-flex xs12 sm12 md12>
            <v-text-field hide-details single-line full-width></v-text-field>
        </v-flex>
        <v-btn icon>
            <v-icon>search</v-icon>
        </v-btn>
    </v-toolbar>
    <!--/v-flex-->
</template>

<script>
export default {
    name: 'SearchBar',
    data: () => ({})
}
</script>

<style scoped>
    .toolbar {
        width: <insert value here>%
    }
</style>

Or you could make a prop that modifies a style on the toolbar.

<template>
    <!--v-flex xs12 sm12 md12-->
    <v-toolbar color="white" floating dense extense :style="{ 'width': width + '%'}">
        <v-flex xs12 sm12 md12>
            <v-text-field hide-details single-line full-width></v-text-field>
        </v-flex>
        <v-btn icon>
            <v-icon>search</v-icon>
        </v-btn>
    </v-toolbar>
    <!--/v-flex-->
</template>

<script>
export default {
    props: {
        width: {
            type: Number,
            default () {
                return 100
            }
        }
    },
    name: 'SearchBar',
    data: () => ({})
}
</script>

<style scoped>
    .toolbar {
        width: <insert value here>%
    }
</style>