4

Node.js 以外のアプリでマテリアル デザインを使用しています。HTML プロジェクトでMaterial アウトライン テキスト フィールド (先頭のアイコン付き)を使用する必要があります。Material.io Web サイトには、一部のコンポーネントの JavaScript コードが表示されますが、他のコンポーネントは表示されません。アウトライン化されたテキスト フィールド コンポーネントを HTML プロジェクトに追加するにはどうすればよいですか?

以下は私のコードです：

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />

    </head>
    <body>
        <!--button class="mdc-button mdc-button--raised">Button</button-->
         

        <div class="mdc-text-field mdc-text-field--outlined">
            <input type="text" id="tf-outlined" class="mdc-text-field__input" />

            <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
            <div class="mdc-notched-outline">
                <svg>
                    <path class="mdc-notched-outline__path"></path>
                </svg>
            </div>
            <div class="mdc-notched-outline__idle"></div>
        </div>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </body>
</html>

このコードのフィドル: jsfiddle

4

2 に答える 2