UIライブラリを導入してみよう!

Question

問題6：UIライブラリを導入してみよう!

今度はVue.jsのUIコンポーネントライブラリを使ってみよう！
VueにはいろいろなUIライブラリがあるから、少し紹介する。

・vue-material
googleのマテリアルデザインに準拠したUIが簡単に作ることができる
・bootstrap-vue
bootstrapというワードは聞いたことあるかもしれないが、bootstrapというUIライブラリのvue版だと思って欲しい。
・Vuetify
これもマテリアルデザインにそったライブラリになる。Vue.js用UIライブラリで一番使われている定番中の定番。

今回はこの中から｀Vuetify｀を使って以下のようなダイアログを作ってみて欲しい。 HTMLファイルにVueとVuetifyのCDNを読み込んで作ってみよう。

あらかじめエディタに書くコード

                <div id="app">
      <v-app>
        <v-main>
          <v-container>
            <template>
              <v-row justify="center">
                <v-btn color="green lighten-2" dark="" @click.stop="dialog = true">
                  Click Here!!
                </v-btn>
                <v-dialog v-model="dialog" max-width="400">
                  <v-card>
                    <v-card-title class="headline">忍者CODE</v-card-title>
                    <v-card-text>
                      <h3 style="margin: 10px 0;">自分なりの理論を組み立てろ!!</h3>
                      <p>■  HTML&CSS/</p>
                      <p>■  Javascript</p>
                      <p>■  jQuery</p>
                      <p>■  模写コーディング</p>
                      <p>■  sass</p>
                      <p>■  PHP</p>
                      <p>■  Git</p>
                      <p>■  Vue</p>
                    </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">
                        OK
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </v-row>
            </template>
          </v-container>
        </v-main>
      </v-app>
    </div>
¥Vue¥

Answer 1

解答ソースコード

              -- headタグ内
<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@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
-- headここまで
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      dialog: false,
    }
  })
</script>
¥Vue¥

UIライブラリを導入してみよう!

問題6：UIライブラリを導入してみよう!

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説