質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.05%

  • Vue.js

    370questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

【vue.js】Element-uiでのヘッダー作成方法について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 571

hnzwjun

score 17

現在vue.jsを使用してPC・スマホ両対応のWEBアプリを作成していまして、UIフレームワークにElement-uiを使用しようと考えています。

Elementの使用方法自体は公式サイトを見てなんとなく理解出来ましたがヘッダーの作成方法だけがいまいちよく分かりません。

<el-container>
  <el-header>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-submenu index="2">
        <template slot="title">Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
    </el-menu>
  </el-header>
  <el-main>
    <p>メインコンテンツ</p>
  </el-main>
</el-container>

公式サイトのソースそのままですが、上記の様に書けば一応ヘッダー自体は作成出来ますが、ホバーした際の背景色などをCSSで指定する方法が分からず、リファレンスを見ても設定項目が無いように思います。

また、公式サイトのソースそのままではレスポンシブデザインではないようで、レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。
それならいっそのこと、Bootstrapを使用してヘッダを作成してしまえばいいのでは?とも考えたのですが、ヘッダーのためだけにJqueryとpopper.jsを入れるのもどうかと思い調べてみると、Bootstrap-vueというものがあることが分かりました。

UIフレームワークを2つ入れてもコンポーネント名が違うので競合等は恐らくないかと思いますが、用途に合わせて2種類、またはそれ以上のUIフレームワークを使用することはよくあることなのでしょうか?

また、Element-uiでのヘッダー作成が上手く行けばBootstrap-vueを使用することもなくなると思うので、Element-uiの使い方に詳しい方いましたらヘッダー作成のアドバイスを頂けないでしょうか?
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。

具体的にレスポンシブ化するというのはどういうことでしょうか?
確かにレスポンシブに見た目を変える機能は element-ui にはないと思います(grid system以外)。

ホバーした際の背景色などをCSSで指定する方法が分からず

ホバー時の色については、menu-item のソースを見ると

https://github.com/ElemeFE/element/blob/dev/packages/menu/src/menu-item.vue

      hoverBackground() {
        return this.rootMenu.hoverBackground;
      },

...

      onMouseEnter() {
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.hoverBackground;
      },
      onMouseLeave() {
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.backgroundColor;
      },

とあり、rootMenuはおそらく menu.vue で、
https://github.com/ElemeFE/element/blob/dev/packages/menu/src/menu.vue

      hoverBackground() {
        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
      }


というように、horizontalモードのときはホバー時の色はbackgroundColorを少し暗くした色とハードコードされているようなので、残念ながら変えるのは無理そうです。

 追記

ハンバーガーメニューのようにしたいということでしたら、見た目は改良の余地がありますが、element-uiのcollapnse component の中に menu を置けばそれっぽいものができます。

画面幅に対して表示を切り替えるには、windowresizeイベントを使用するとできます(media query を使用する方法もあります)。

demo(codesandbox)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/26 01:20

    回答ありがとうございます。
    レスポンシブ化というのはヘッダーについてで、画面幅が大きい場合は項目を横並びに表示、画面幅が小さい(スマホ等)場合は項目をアイコンがクリックされたら表示されるようにしたかったのです(ハンバーガーメニューというのでしょうか?)

    Bootstrapを使用すれば簡単に実現出来る様なのですが、Bootstrapですとハンバーガーメニューやドロップダウンの展開にJqueryとpopper.jsが必須みたいなので別の方法はないか(出来ればElement-uiだけを使用)と思った次第です。

    キャンセル

  • 2017/12/26 19:16

    サンプルを作成頂きありがとうございます。
    collapseコンポーネントとbootstrapのCSSを合わせてヘッダー作成に挑戦してみましたが中々思い通りに作成が出来ていない状態です。

    見た目や機能はbootstpapのままbootstrap.jsを使わないというのはやはり難しいのですね

    キャンセル

  • 2017/12/26 19:54

    bootstrap の CSS をそのまま使うということでしょうか?
    参考にするぐらいにしてご自分で CSS を作られたほうが速いと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Vue.js

    370questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。