Vuetify 基礎三

表單元件

下拉式選單

<div id="dropdown-1">
  <v-app>
    <v-container fluid>

      <v-select :items="items"
                label="標準樣式">
      </v-select>

      <v-select :items="items" 
         filled label="填充樣式">
      </v-select>

      <v-select :items="items" 
         outlined label="輪廓樣式">
      </v-select>

      <v-select :items="items" solo>
      </v-select>
    </v-container>
  </v-app>
</div>

<script>
  var vm = new Vue({
    el: '#dropdown-1',
    vuetify: new Vuetify(),
    data: {
      items: ['春','夏','秋','冬'],
    }
  })
</script>

工具列

選單

抽屜式 Draw Menu

Vuetify 樂活學程式 {{ item.icon }} {{ item.title }} 樂活學程式 mdi-dots-vertical 
<!DOCTYPE html>
<html>
<head>
  <!-- 採用 Unicode utf-8 編碼 -->
  <meta charset="utf-8" />

  <!-- 調整手機瀏覽器的螢幕解析度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 安裝字體及圖標 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  <!-- 安裝 Vue、vue-router -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

  <!-- 安裝 Vuetify -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

  <style>
    .v-ripple__container {
      display: none !important;
    }

    /* 避免程式啓動時閃爍 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <v-app>
    <v-card height="100vh" width="100%" 
          class="mx-auto overflow-hidden" 
          @click.stop="drawer=false">
      <!-- Draw Menu -->
      <v-navigation-drawer v-model="drawer" 
            absolute temporary dark>
        <v-list-item>
          <!-- 圖像 -->
          <v-list-item-avatar>
            <v-img src="http://ewin.biz/app/logo.png">
            </v-img>
          </v-list-item-avatar>

          <!-- 標題 -->
          <v-list-item-content>
            <v-list-item-title class="title">
              Vuetify
            </v-list-item-title>
            <v-list-item-subtitle>
              樂活學程式
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <!-- 選項 -->
        <v-list nav dense>
          <v-list-item v-for="item in drawItems" 
                    :key="item.title" link 
                    @click.stop="drawer=false">
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>
                {{ item.title }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <!-- 工具列 -->
      <v-toolbar dark>
        <!--主選單按鈕-->
        <v-app-bar-nav-icon 
            @click.stop="drawer=!drawer">
        </v-app-bar-nav-icon>

        <!--工具列標題-->
        <v-toolbar-title>
          樂活學程式
        </v-toolbar-title>

        <v-spacer></v-spacer>

        <!--其他工具按鈕-->
        <v-btn icon>
          <v-icon>
            mdi-dots-vertical
          </v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      drawer: false,
      drawItems: [
        { title:'相片',icon:'mdi-image' },
        { title:'關於',icon:'mdi-help-box' },
      ]
    }
  });
</script>
</body>
</html>

底部工具列

<div id="app">
  <v-app id="inspire">
    <v-card height="200px">
      <v-footer absolute padless>
        <v-card flat tile width="100%"
                class="red lighten-1 
                       text-center">
          <v-card-text>
            <v-btn v-for="icon in icons"
                    :key="icon"
                    class="mx-4" icon>
              <v-icon size="24px">
                  {{ icon }}
                </v-icon>
            </v-btn>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-text class="white--text">
              <strong>樂活學程式</strong>
          </v-card-text>
        </v-card>
      </v-footer>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
      icons: [
        'mdi-home',
        'mdi-email',
        'mdi-calendar',
        'mdi-delete',
      ]
    })
  })
</script>

底部導覽列

歷史 mdi-history 最愛 mdi-heart 導航 mdi-map-marker 
<div id="app">
  <v-app id="inspire">
    <v-card height="150px">
      <v-bottom-navigation v-model="bottomNav" absolute>
        <v-btn value="recent">
          <span>歷史</span>
          <v-icon>mdi-history</v-icon>
        </v-btn>

        <v-btn value="favorites">
          <span>最愛</span>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn value="nearby">
          <span>導航</span>
          <v-icon>
            mdi-map-marker
          </v-icon>
        </v-btn>
      </v-bottom-navigation>
    </v-card>
  </v-app>
</div>

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      bottomNav: 'recent'
    }
  })
</script>
In [ ]:

🏠