expansion-sink.vue

<template>
  <boilerplate>
    <div class="text-xs-left">
      <v-expansion-panel
        v-model="panel2"
        expand
        class="mb-5"
      >
        <v-expansion-panel-content
          v-for="(item, i) in 5"
          :key="i"
          title="Item"
        >
          <v-card>
            <v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel focusable class="mb-5">
        <v-expansion-panel-content v-for="n in 5" :key="`focusable-${n}`" title="Focus">
          <template slot="header">
            <v-list-item-avatar color="success" size="20" left></v-list-item-avatar>
            <v-list-item-content>
              <v-subtitle-1>Custom header</v-subtitle-1>
            </v-list-item-content>
          </template>
          <v-card>
            <v-card-text>Hello</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel expand class="mb-5">
        <v-expansion-panel-content v-for="n in 5" :key="`expand-${n}`" title="Expand">
          <v-card>
            <v-card-text>Hello</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel class="mb-5" v-model="panel">
        <v-expansion-panel-content v-for="n in 3" :key="n">
          <v-list-item slot="activator" color="white">
            <v-list-item-avatar color="grey" left></v-list-item-avatar>
            <v-list-item-content>
              <v-subtitle-2>One item</v-subtitle-2>
            </v-list-item-content>
            <v-list-item-icon>
              <v-icon>mdi-chevron-down</v-icon>
            </v-list-item-icon>
          </v-list-item>
          <v-card>
            <v-card-text>
              Hello there
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
        <v-expansion-panel-content title="Disabled" disabled>
          <v-card>
            <v-card-text>
              Hello again!
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
        <v-expansion-panel-content title="Readonly" readonly>
          <v-card>
            <v-card-text>
              Hello again!
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
        <v-expansion-panel-content expand-icon="mdi-menu-down">
          <template slot="header">
            <v-list-item-avatar color="success" size="20" left></v-list-item-avatar>
            <v-list-item-content>
              <v-subtitle-1>Custom header</v-subtitle-1>
              <v-body-2 class="grey--text mt-1">subtitle text</v-body-2>
            </v-list-item-content>
          </template>
          <v-card>
            <v-card-text>
              Hello again!
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
        <v-expansion-panel-content>
          <template slot="header">
            <v-list-item-avatar
              :color="panel === 6 ? 'success' : 'warning'"
              size="20"
              left
            ></v-list-item-avatar>
            <v-list-item-content>
              <v-subtitle-1>Custom header</v-subtitle-1>
              <v-body-2 class="grey--text mt-1">subtitle text</v-body-2>
            </v-list-item-content>
          </template>
          <v-avatar slot="actions">
            <v-img src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"></v-img>
          </v-avatar>
          <v-card>
            <v-card-text>
              Hello again!
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel popout class="mb-5">
        <v-expansion-panel-content title="Popout"  v-for="n in 3" :key="`popout-${n}`">
          <v-card>
            <v-card-text>
              Hi there
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
      <v-expansion-panel inset>
        <v-expansion-panel-content title="Inset"  v-for="n in 3" :key="`inset-${n}`">
          <v-card>
            <v-card-text>
              Hi there
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </div>
  </boilerplate>
</template>

<script>
  export default {
    data: () => ({
      panel: null,
      panel2: [false, true, true]
    })
  }
</script>