小编Fre*_*esh的帖子

Material.io 与 CDN

因此,我试图弄清楚如何使用 Material.io 作为我正在做的一些 Web 应用程序实验的前端,但我只想利用 CDN 而不是 npm。我有点遵循这里找到的示例: https: //codelabs.developers.google.com/codelabs/mdc-101-web/#1,但它假设使用 npm。现在我已经导入了 CSS 和 JS 的 Material 组件,并且有一个基本的登录表单,带有一些样式,但我不知道如何让 JavaScript 正确运行并产生表单框动画参见此处的示例: https: //codelabs.developers.google.com/codelabs/mdc-101-web/#2

HTML:

<html>
    <head>
        <!-- Import Material components CSS and JS -->
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </head>
<body>
        <div class="login_container">
            <div class="box" id="two"> 
                <form>
                    <label class="mdc-text-field mdc-text-field--filled username">
                        <span class="mdc-text-field__ripple"></span>
                        <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
                        <span class="mdc-floating-label" id="username-label">Username</span>
                        <span class="mdc-line-ripple"></span>
                    </label>
                    <label class="mdc-text-field mdc-text-field--filled password">
                        <span class="mdc-text-field__ripple"></span>
                        <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
                        <span class="mdc-floating-label" …
Run Code Online (Sandbox Code Playgroud)

html javascript css material-design

5
推荐指数
1
解决办法
2152
查看次数

标签 统计

css ×1

html ×1

javascript ×1

material-design ×1