Vuetify 基礎二

• • 0.1  清單
    • 0.1.1  簡單的清單
    • 0.1.2  含圖像的清單
    • 0.1.3  多行文字的清單
    • 0.1.4  透過 Vue 物件來填入資料
    • 0.1.5  網站清單的範例：
• 1  卡片
  • 1.1  對話框

清單

簡單的清單

單行文字範例

<div id="list-1">
  <v-app>
    <v-card class="mx-auto" max-width="300" tile>
      <v-list dense>

        <!--單行文字範例 -->
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title>
              單行文字範例
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>

      </v-list>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#list-1',
    vuetify: new Vuetify()
  })
</script>

含圖像的清單

mdi-clock 單行文字+圖像 mdi-clock 單行文字+圖像

<div id="list-2">
  <v-app id="inspire">
    <v-card max-width="300" tile>
      <v-list dense>

        <!--單行文字+圖像 -->
        <v-list-item>
          <!-- 圖像 -->
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>

          <!-- 文字 -->
          <v-list-item-content>
            <v-list-item-title>
              單行文字+圖像
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <!--單行文字+圖像 -->
        <v-list-item>
          <!-- 圖像 -->
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>

          <!-- 文字 -->
          <v-list-item-content>
            <v-list-item-title>
              單行文字+圖像
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>         
      </v-list>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#list-2',
    vuetify: new Vuetify()
  })
</script>

多行文字的清單

二行文字範例 第二行 三行文字範例 第二行 第三行

<div id="list-3">
  <v-app id="inspire">
    <v-card max-width="300" tile>
      <v-list dense>

        <!--二行文字範例 -->
        <v-list-item two-line>
          <v-list-item-content>
            <v-list-item-title>
              二行文字範例
            </v-list-item-title>

            <v-list-item-subtitle>
              第二行
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <!--三行文字範例 -->
        <v-list-item three-line>
          <v-list-item-content>
            <v-list-item-title>
              三行文字範例
            </v-list-item-title>

            <v-list-item-subtitle>
              第二行
            </v-list-item-subtitle>

            <v-list-item-subtitle>
              第三行
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#list-3',
    vuetify: new Vuetify()
  })
</script>

透過 Vue 物件來填入資料

<div id="list-4">
  <template>
    <v-card class="mx-auto" max-width="300" tile>
      <v-list dense>
        <v-subheader>標題</v-subheader>
        <v-list-item-group v-model="item" color="primary">

          <!-- 清單 -->
          <v-list-item v-for="(item, i) in items" :key="i">

            <!-- 圖像 -->
            <v-list-item-icon>
              <v-icon v-text="item.icon">
              </v-icon>
            </v-list-item-icon>

            <!-- 文字 -->
            <v-list-item-content>
              <v-list-item-title v-text="item.text">
              </v-list-item-title>
            </v-list-item-content>

          </v-list-item>

        </v-list-item-group>
      </v-list>
    </v-card>
  </template>
</div>

<script>
  new Vue({
    el: '#list-4',
    vuetify: new Vuetify(),
    data: {
      item: 1,
      items: [
        { text: '時間', icon: 'mdi-clock' },
        { text: '人物', icon: 'mdi-account' },
        { text: '旗幟', icon: 'mdi-flag' }
      ]
    }
  })
</script>

網站清單的範例：

學習網站 mdi-magnify

<div id="list-5">
 <v-app id="inspire">
  <v-card max-width="450">
   <v-toolbar color="cyan" dark>
    <v-app-bar-nav-icon>
    </v-app-bar-nav-icon>

    <v-toolbar-title>
     學習網站
    </v-toolbar-title>

    <v-spacer></v-spacer>

    <v-btn icon>
     <v-icon>mdi-magnify</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" 
                  v-text="item.header">
     </v-subheader>

     <v-divider v-else-if="item.divider"
                :key="index" 
                :inset="item.inset">
     </v-divider>

     <v-list-item v-else 
              :key="item.title" @click="">
      <v-list-item-avatar>
       <v-img :src="item.avatar"></v-img>
      </v-list-item-avatar>

      <v-list-item-content>
       <v-list-item-title 
               v-html="item.title">
       </v-list-item-title>
       <v-list-item-subtitle 
               v-html="item.sub">
       </v-list-item-subtitle>
      </v-list-item-content>
     </v-list-item>
    </template>
   </v-list>
  </v-card>
 </v-app>
</div>

<script>
 new Vue({
  el: '#list-5',
  vuetify: new Vuetify(),
  data: () => ({
   items: [
    { header: '網站清單' },
    {
     avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
     title: 'Python',
     sub:"<a>http://python.ewin.tw</a>",
    },
    { divider: true, inset: true },
    {
     avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
     title: 'HTML',
     sub:"<a>http://www.ewin.tw/app/html-1/</a>",
    },
    { divider: true, inset: true },
    {
     avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
     title: 'VUE',
     sub:"<a>http://www.ewin.tw/app/vue-1/</a>",
    }
   ],
  }),
 })
</script>

卡片

卡片標題 卡片次標題 按鈕一 按鈕二

<div id="card-1">
  <v-app id="inspire">
    <v-card class="mx-auto"
            max-width="344">
      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title 
             class="headline mb-1">
            卡片標題
          </v-list-item-title>

          <v-list-item-subtitle>
            卡片次標題
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-card-actions>
        <v-btn text>按鈕一</v-btn>
        <v-btn text>按鈕二</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

<script>
  var vm = new Vue({
    el: '#card-1',
    vuetify: new Vuetify(),
  })
</script>

對話框

開啓對話框 對話框抬頭 對話框内容 取消 確定

<div id="dlg-1">
  <v-app>
    <v-row justify="center">
      <v-btn @click.stop="dialog=true">
        開啓對話框
      </v-btn>
    </v-row>

    <!--加上 persistent會變 Do Model 對話框-->
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">
          對話框抬頭
        </v-card-title>

        <v-card-text>
          對話框内容
        </v-card-text>

        <!-- 對話框按鈕 -->
        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn color="green darken-1"
                 text @click="dialog = false">
            取消
          </v-btn>

          <v-btn color="green darken-1"
                 text @click="dialog = false">
            確定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</div>

<script>
  new Vue({
    el: '#dlg-1',
    vuetify: new Vuetify(),
    data: {
      dialog: false
    }
  })
</script>