How does 'slot activator' work in vuetify?

Question

I am using Vuetify predefined Template 'Google Contacts'.

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

I am new in Vuetify and facing difficulties understanding some codes. One is 'slot activator'.

Sample Code:

    <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> 

Can anybody tell me how 'slot activator' works?

Answer 1

When you declare a Vue component, you can create Named Slots, which is a Vue native feature (not from Vuetify):

For example, suppose we have an app-layout component with the following template:

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

Parent markup:

<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> 

The rendered result will be:

<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> 

Notice the <slot name="header"></slot> in the example template declaration (first code block above). When someone uses that component, she can declare <h1 slot="header">Here might be a page title</h1> and this code will take <slot name="header"></slot>'s place in the final markup.

Here's a demo of the <slot>s in action:

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

<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>

Your code

You show the example:

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

As you can see, this code tries to place the v-list-tile in the activator slot of the parent component (v-list-group).

Having a look at the official docs (incl. the old version), there's no mention if the <v-list-group> has a slot named activator.

But a look at <v-list-group>'s SOURCE CODE quickly proves there does exist one.