田中賢一郎氏 Web技術速習テキスト ７．１ サインアップ＆ログイン でアイコン出ない

最近忙しくて読めていなかった

   Web技術速習テキスト　

また読み返しています。

リンク

今回は、自分で日記アプリでも作ろうと思い、Date pickers を使って、各日ごとのデータ登録はできたのですが、

他の人にも使ってもらいたいな

と思ったとき、ユーザ管理が必要です。

でも安心できます。

この本では　７．１　サインアップ＆ログイン　で、Firebaseのサービスの中の認証機能を使えばすぐに組み込めそうです。

まずは、UIから

サインアップ画面で、以下のような画面作りを目指します。

実際にやってみたのがこちら

あれ、アイコン出ていない。。。

「email」「lock」「person」などの文字がそのまま出てしまっている。

かっこわるい。

※ウインドウ枠は広すぎるのは、まだテスト的に実装しているので

　横幅を指定していないだけです。

メールアイコンとか鍵マークとか人マークだしたい、、、

でも実装は、、、合っているんですよね。。。

とすると、この本が出てから、またバージョンアップされて動かなくなった可能性大です。

調べてみると、、、

これならできました。

            <v-text-field prepend-icon="mdi-email" label="E-mail" type="text" v-model="email"></v-text-field>

            <v-text-field prepend-icon="mdi-lock" label="Password" type="password" v-model="password"></v-text-field>

            <v-text-field v-show="doSignUp" prepend-icon="mdi-account" label="Name" type="text" v-model="name"></v-text-field>

emailとlockは、あたまに　「mdi-」をつけました。

person　は「mdi-account」で出ました。

・・・ mdi

なんだこれ。

と思って調べました。

Material Design Icons というものらしいです。

ここを見れば、他に欲しいアイコンも気軽に設定できそうですね。

これから、認証処理を組み込むところ。

いやー楽しみ楽しみ