javascript - Vuetify Search Textfield in APpbar，背景褪色，点击展开

Question

是否可以在 vuetify 中在应用栏上添加一个褪色的文本字段，该文本字段具有褪色的背景并在点击时展开。

这是我在材料 ui react 上找到的一个示例：

到目前为止，我尝试了这个，但它根本不起作用（似乎很奇怪）

    <v-app-bar :clipped-left="clipped" fixed app class="app-bar-gradient" dark>
      <v-col cols="12" sm="6">
          <v-text-field
            outlined
            label="Prepend inner"
            prepend-inner-icon="mdi-magnify"
          ></v-text-field>
      </v-col>
    </v-app>

标签： javascriptvue.jsmaterial-designvuetify.js

Answer 1

<template>
<v-container>
    <v-row>
      <v-col>
        <div>
          <v-app-bar>
            <v-toolbar-title class="my-5"></v-toolbar-title>

            <v-spacer></v-spacer>

            <template v-slot:extension>
              <v-container>
                <v-row justify="end">
                  <v-col cols="3">
                    <v-text-field
                      name="name"
                      label=""
                      id="id"
                      outlined
                    ></v-text-field>
                  </v-col>
                  <v-col cols="3">
                    <v-text-field
                      name="name"
                      label=""
                      id="id"
                      outlined
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </template>
          </v-app-bar>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<style scoped>
.my-5 {
  margin-top: 3em;
}
</style>