現在vue.jsを使用してPC・スマホ両対応のWEBアプリを作成していまして、UIフレームワークにElement-uiを使用しようと考えています。
Elementの使用方法自体は公式サイトを見てなんとなく理解出来ましたがヘッダーの作成方法だけがいまいちよく分かりません。
html
1<el-container> 2 <el-header> 3 <el-menu 4 :default-active="activeIndex2" 5 class="el-menu-demo" 6 mode="horizontal" 7 @select="handleSelect" 8 background-color="#545c64" 9 text-color="#fff" 10 active-text-color="#ffd04b"> 11 <el-menu-item index="1">Processing Center</el-menu-item> 12 <el-submenu index="2"> 13 <template slot="title">Workspace</template> 14 <el-menu-item index="2-1">item one</el-menu-item> 15 <el-menu-item index="2-2">item two</el-menu-item> 16 <el-menu-item index="2-3">item three</el-menu-item> 17 </el-submenu> 18 <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item> 19 </el-menu> 20 </el-header> 21 <el-main> 22 <p>メインコンテンツ</p> 23 </el-main> 24</el-container>
公式サイトのソースそのままですが、上記の様に書けば一応ヘッダー自体は作成出来ますが、ホバーした際の背景色などをCSSで指定する方法が分からず、リファレンスを見ても設定項目が無いように思います。
また、公式サイトのソースそのままではレスポンシブデザインではないようで、レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。
それならいっそのこと、Bootstrapを使用してヘッダを作成してしまえばいいのでは?とも考えたのですが、ヘッダーのためだけにJqueryとpopper.jsを入れるのもどうかと思い調べてみると、Bootstrap-vueというものがあることが分かりました。
UIフレームワークを2つ入れてもコンポーネント名が違うので競合等は恐らくないかと思いますが、用途に合わせて2種類、またはそれ以上のUIフレームワークを使用することはよくあることなのでしょうか?
また、Element-uiでのヘッダー作成が上手く行けばBootstrap-vueを使用することもなくなると思うので、Element-uiの使い方に詳しい方いましたらヘッダー作成のアドバイスを頂けないでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/25 16:20
2017/12/26 10:16
2017/12/26 10:54