Estoy usando Vuetify Plantilla predefinida ‘Contactos de Google’.

Link: https://vuetifyjs.com/en/examples/layouts/googleContacts

Soy nuevo en Vuetify y se enfrentan a dificultades de comprensión de algunos códigos. Uno es ‘ranura activador’.

Código De Ejemplo:

<v-list-tile slot="activator">
    <v-list-tile-content>
        <v-list-tile-title>
            {{ item.text }}
        </v-list-tile-title>
    </v-list-tile-content>
</v-list-tile>

¿Alguien puede decirme cómo ‘de la ranura de activador de las obras?

1 Comentario

  1. 27

    Cuando se declara un Vue componente, puede crear Nombre Slots, que es un Vue nativo característica (no de Vuetify):

    Por ejemplo, supongamos que tenemos una app-layout componente con el
    siguiente plantilla:

    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>

    De los padres de marcado:

    <app-layout>
      <h1 slot="header">Here might be a page title</h1>
    
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    
      <p slot="footer">Here's some contact info</p>
    </app-layout>

    El resultado representado será:

    <div class="container">
      <header>
        <h1>Here might be a page title</h1>
      </header>
      <main>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </main>
      <footer>
        <p>Here's some contact info</p>
      </footer>
    </div>

    Aviso de la <slot name="header"></slot> en la plantilla de ejemplo de la declaración del primer bloque de código anterior). Cuando alguien usa ese componente, ella puede declarar <h1 slot="header">Here might be a page title</h1> y este código tendrá <slot name="header"></slot>‘s place en el marcado final.

    He aquí una demostración de la <slot>s en acción:

    JS:

    Vue.component('mycomponent', {
      template: "#mycomponenttemplate"
    })
    new Vue({
      el: '#app'
    });

    HTML:

    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    
    <div id="app">
      <app-layout>
        <h1 slot="header">Here might be a page title</h1>
    
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
    
        <p slot="footer">Here's some contact info</p>
      </app-layout>
    </div>
    
    <template id="mycomponenttemplate">
        <div class="container">
          <header>
            <slot name="header"></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name="footer"></slot>
          </footer>
        </div>
    </template>

    El código

    Mostrar el ejemplo:

    <v-list-group
             ...
              >
                <v-list-tile slot="activator">
                  ...
                </v-list-tile>
    

    Como se puede ver, este código intenta colocar el v-list-tile en el activator ranura de la componente principal (v-list-group).

    Tener un vistazo a el oficial docs (incl. la versión antigua), no hay ninguna mención de si el <v-list-group> tiene un slot llamado activator.

    Pero un vistazo a <v-lista-grupo>del CÓDIGO FUENTE rápidamente demuestra que sí existe uno.

    • Muy bonito Explicación! Gracias. ¿Me pueden brindar cualquier tipo de enlace a los sencillos Tutoriales en Vue o Vuetify?
    • No podía encontrar ninguna documentación directamente relacionado con el término activator.
    • Leer el final de la respuesta. El nombre de la ranura es nada. Lo llamaron activator porque querían. Compruebe su código: github.com/vuetifyjs/vuetify/blob/… Podría haber sido cualquier otra cosa y que funcionaría de la misma.

Dejar respuesta

Please enter your comment!
Please enter your name here