Vuetify Example Pen

index.html

<div id="app">
  <v-app id="inspire">
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-toolbar color="white">
            <v-toolbar-side-icon></v-toolbar-side-icon>
  
            <v-toolbar-title>Straw Clusters</v-toolbar-title>
  
            <v-spacer></v-spacer>
  
            <v-btn href="https://kakao.agit.in/g/300006248" icon>
              <v-icon>info_outline</v-icon>
            </v-btn>
          </v-toolbar>
  
          <v-list three-line>
            <template v-for="(item, index) in items">
              <v-subheader
                v-if="item.header"
                :key="item.header"
              >
                {{ item.header }}
              </v-subheader>
  
              <v-divider
                v-else-if="item.divider"
                :key="index"
                :inset="item.inset"
              ></v-divider>
  
              <v-list-tile
                v-else
                :key="item.title"
                
              >
  
                <v-list-tile-content>
                  <v-list-tile-title v-html="item.title"></v-list-tile-title>
                  <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
                </v-list-tile-content>
                <v-spacer></v-spacer>
                <!--<v-list-tile-action>-->
                 <v-btn :href="item.console" icon ripple>
                   <v-icon>dashboard</v-icon>
                 </v-btn>
                 <v-btn :href="item.region" icon ripple>
                   <v-icon>donut_small</v-icon>
                 </v-btn>
                 <v-btn href="https://straw-kibana.9rum.cc" icon ripple>
                   <v-icon>timeline</v-icon>
                 </v-btn>
               <!--</v-list-tile-action>-->
                
              </v-list-tile>
            </template>
          </v-list>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  data () {
    return {
      items: [
        { header: 'Clusters' },
        {
          title: 'lemonade',
          subtitle: "범용, 딥러닝피쳐",
          console:"http://console.straw.lemonade.is.daumkakao.io/",
          region: "http://region.straw.lemonade.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'mocha',
          subtitle: "검색품질",
          console:"http://console.straw.mocha.is.daumkakao.io/",
          region: "http://region.straw.mocha.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'mojito',
          subtitle: "트위터, 유튜브",
          console:"http://console.straw.mojito.is.daumkakao.io/",
          region: "http://region.straw.mojito.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'soda',
          subtitle: "쇼핑, 로컬",
          console:"http://console.straw.soda.is.daumkakao.io/",
          region: "http://region.straw.soda.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'coke',
          subtitle: "뉴스, 블로그",
          console:"http://console.straw.coke.is.daumkakao.io/",
          region: "http://region.straw.coke.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'tsingtao',
          subtitle: "검색클라우드",
          console:"http://console.straw.tsingtao.is.daumkakao.io/",
          region: "http://region.straw.tsingtao.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'latte',
          subtitle: "DC비프로스트",
          console:"http://console.straw.latte.is.daumkakao.io/",
          region: "http://region.straw.latte.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'cappuccino',
          subtitle: "카페",
          console:"http://console.straw.cappuccino.is.daumkakao.io/",
          region: "http://region.straw.cappuccino.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'bacardi' ,
          subtitle: "컨텐츠오브젝트 랭킹",
          console:"http://console.straw.bacardi.is.daumkakao.io/",
          region: "http://region.straw.bacardi.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'milktea',
          subtitle: "아르곤",
          console:"http://console.straw.milktea.is.daumkakao.io/",
          region: "http://region.straw.milktea.is.daumkakao.io/"
        },
        { divider: true },
        {
          title: 'rehearsal',
          subtitle: "리허설, 개발자 테스트",
          console:"http://console.straw.v1.rehearsal.is.daumkakao.io/",
          region: "http://region.straw.v1.rehearsal.is.daumkakao.io/"
        },
       
        
        
      ]
    }
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

vuetify-example-pen.markdown

Vuetify Example Pen

A Pen by Dann Yu on CodePen.

License.