Material Components for the Webでタブの下のインジケーターを表示させる方法が知りたい

##やっていること
ASP.NETでウェブアプリケーションを作成しています。
その中で、Material Components for the Webのタブを使用したいと考えています。

https://material.io/components/web/catalog/tabs/

#できていない事
Tabの配置自体は以下の様にできています。
上の段がサンプルのTab Bar with text labels をそのまま記述して表示されたタブで、
下の段がサンプルのCSS Only Support をそのまま記述して表示されたタブです。

できていないのは、上の段のタブにインジケーター（タブの下の黒い線）が表示されていない点です。
インジケーターを表示させるには何が足りないのかが知りたいです。

上の段のタブのHTMLです。

HTML
1<nav id="basic-tab-bar" class="mdc-tab-bar">
2    <a class="mdc-tab mdc-tab--active" href="#one">Home</a>
3    <a class="mdc-tab" href="#two">Merchandise</a>
4    <a class="mdc-tab" href="#three">About Us</a>
5    <span class="mdc-tab-bar__indicator"></span>
6</nav>

下の段のタブのHTMLです。

HTML
1<nav id="basic-tab-bar" class="mdc-tab-bar">
2    <a class="mdc-tab mdc-tab--active" href="#one">
3        Home
4        <span class="mdc-tab__indicator"></span>
5    </a>
6    <a class="mdc-tab" href="#two">
7        Merchandise
8        <span class="mdc-tab__indicator"></span>
9    </a>
10    <a class="mdc-tab" href="#three">
11        About Us
12        <span class="mdc-tab__indicator"></span>
13    </a>
14</nav>

##関連ありそうな事項
読み込んでいるjs, cssは以下の通りです。

node_modules/material-components-web/dist/material-components-web.js
node_modules/material-components-web/dist/mdc.tabs.js
node_modules/material-components-web/dist/material-components-web.css
node_modules/@material/tabs/dist/mdc.tabs.css

また、スクリプトを読み込んだあとに、

F12の開発者ツールで確認した際に、js, cssが読み込めていないなどのエラーは発生していません。

行動規範の内容に同意します

回答2件

ベストアンサー

Jsは読み込まれているものの、要素に適用できていないようです。

#basic-tab-barにdata-mdc-auto-init="MDCTabBar"を追加してみてください。

もしくは、以下のコードを実行することでもJsを適用できます。この場合は、window.mdc.autoInit()を実行しなくても構いません。

html
1<script>
2    new mdc.tabs.MDCTabBar(document.querySelector('#basic-tab-bar'));
3</script>

ちなみにですが、今回の場合mdc.tabs.jsとmdc.tabs.cssを読み込む必要は無いですよ。

投稿2018/04/28 01:16

退会済みユーザー

総合スコア0

OXamarin

2018/04/29 01:08

ありがとうございました。無事動きました。このような記述を追加しないといけないといけないというのはどこかに書いてありましたか？

退会済みユーザー

2018/04/29 17:28

こちらに書いてあります！ Auto Init - Material Components for the Web https://material.io/components/web/catalog/auto-init/ Migrating from Material Design Lite - Material Components for the Web https://material.io/components/web/docs/migrating-from-mdl/

行動規範の内容に同意します

Material Design Componentを使いたい方がこの質問に飛んできた場合のことを考えて…。

material-components-web.js/ cssは最後に読んでやらないとダメみたいです。

cshtml
1<div>
2        <div style="height:58px">
3            @*<img src="~/Content/Images/ヘッダタブ.PNG" style="margin-left:150px;margin-top:13px;"/>*@
4            <nav id="basic-tab-bar" data-mdc-auto-init="MDCTabBar" class="mdc-tab-bar">
5                <a class="mdc-tab mdc-tab--active" href="#one">Home</a>
6                <a class="mdc-tab" href="#two">Merchandise</a>
7                <a class="mdc-tab" href="#three">About Us</a>
8                <span class="mdc-tab-bar__indicator"></span>
9            </nav>
10        </div>
11    </div>
12</div>
13
14<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
15<script>mdc.autoInit()</script>
16<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">