问题标签 [mdc-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
530 浏览

css - 在 angular-cli 项目中使用 mdc sass 文件

我有一个项目使用angular-cli. 我正在使用mdc 组件/. 我想导入单个组件的 sass 文件。为了这,

1) 我已经使用这个命令改变了默认的 styleExt

2) 将文件重命名style.cssstyle.scss.

3)在angular-cli.json改变

4)添加stylePreprocessorOptions配置以包含路径

5)最后在style.scss文件中导入

但这显示

我错过了什么吗?

0 投票
1 回答
1205 浏览

angular - mdc-components的foundation和adapter类的实际使用

我正在尝试使用 mdc-components创建的 angular4 项目angular-cli。所以我使用 npm 命令安装了模块

这个安装

然后创建了一个包含滑块 HTML 标记的组件

在 ts 方面使用ViewChild

MDCSlider并使用类包装这个元素

然后为文件中的同一 mdc 组件导入 sassstyles.scss文件

这在 UI 上呈现了一个漂亮的材质滑块组件,它工作正常。

监听更改事件

并在浏览器控制台上记录滑块的当前值。

但是我对每个组件的基础适配器类感到困惑。

从文档中,我得到了

基础类是和dom元素交互的,关于交互的名字我可以

1) 监听事件

2) 获取/设置组件的当前值

我可以将我的自定义适配器传递给基础类。

我对此有一些疑问

1)要使用组件,每次都必须使用基础类?使用自定义适配器实现?

2)除了angular2的复选框示例之外,任何显示使用基础和适配器的场景或示例?

3) 如果我必须创建自己的角度组件,是否使用基础类?

0 投票
1 回答
280 浏览

mdc - mdc 关闭所有嵌套对话框而不是活动对话框

我尝试打开一个mdc-dialog里面的mdc-dialog. 关闭第二个对话框时,material-components-web 会关闭两个对话框,而不是返回到底层对话框(第一个对话框)。请参阅codepen.io上的示例。

这是一个错误还是我错过了什么?

0 投票
2 回答
1998 浏览

javascript - MDC-Web:mdc-text-field--用预填充值概述

我正在预填充一些文本字段并且边框不可见。 在此处输入图像描述

例如,我正在使用以下 JavaScript 来预填充字段,但在单击/取消单击该字段之前不会呈现大纲。我试过了

HTML是:

0 投票
2 回答
1444 浏览

ios - 材料文本字段中的错误文本超出屏幕

我正在为我的项目使用 Material Textfield,

和错误我设置为

如果错误消息是长文本超出屏幕,我该如何解决?请参见下图。

在此处输入图像描述

0 投票
1 回答
646 浏览

angular - 如何在 .NET Core Angular VS2017 模板中实现 angular-mdc-web

我正在尝试让 angular-mdc-web 与 vs2017 .net 核心角度模板一起使用。到目前为止没有运气。

  • 按钮的波纹效果很奇怪
  • 单击按钮时,按钮完全变白
  • 在调整 chrome 大小时,点击尺寸不会随之移动

请看一下Demo-Gif: Demo Gif

编辑 12.04.2018

现在一切正常,多亏了三氧合剂!您可以从vs2017-Angluar-Template-with-mdc-web克隆/下载解决方案

根据以下入门教程: Angular MDC - 入门

我知道,以下步骤会破坏引导程序的内容。但我只想让按钮工作。

问题是:如何使用 vs2017 Angular-Template 获得 angular-mdc-web 工作?谢谢你的帮助!

我是如何设置的:VS2017 Community Edition 15.6.4

  1. 菜单文件\新建\项目...
  2. ASP.NET Core Web 应用程序
  3. 选择角度

  4. 编辑package.json(准备好使用 vs2017 的 angular5,没有引导程序)

  1. 编辑webpack.config.vendor.js

  1. 编辑webpack.config.js

  1. 为 typescript >=2.7.2 编辑tsconfig.json
  1. 使用此行创建ClientApp\styles.scss
  1. 编辑ClientApp/boot.browser.ts
  1. 编辑ClientApp/boot.server.ts
  1. 创建ClientApp\app\app.module.mdc.ts
  1. 编辑app.shared.module.ts

并导入它:

  1. 编辑ClientApp\app\components\app\app.component.html
  1. 清除/清空/删除ClientApp\app\components\navmenu\navmenu.component.html中的所有内容 这会导致按钮在调整浏览器窗口大小时出现故障

  2. 编辑视图\共享\_Layout.cshtml

  1. 编辑Views\Home\Index.cshtml
  1. 保存所有文件并关闭 VS2017
  2. 打开 Node.js 命令提示符并进入项目目录(package.json 所在的位置)
  3. rmdir /S node_modules (重复直到所有内容都被删除)
  4. npm 安装
  5. npm 运行构建:vd
  6. npm 运行构建:开发
  7. 打开VS2017和项目
  8. 等到 npm restore(选择 npm 输出)完成

  9. 启动解决方案 (F5) 并单击按钮

0 投票
2 回答
6175 浏览

ios - MDCTextField() 未正确显示

我有一个简单的 UIViewController,我正在尝试学习如何配置 MDCTextField。

我有两个错误

  1. 文本字段不可编辑
  2. 帮助文本显示在文本字段的顶部而不是其下方。

如何解决这两个错误?或者这种文本字段是否有更好的库。

这里是我们点击它之前的文本字段。您可以看到帮助文本位于文本字段的顶部。

在此处输入图像描述

这是单击后的文本字段。 您可以看到占位符文本确实浮动并且占位符文本和下划线确实改变了颜色,但我仍然无法输入文本并且帮助文本仍然在顶部而不是在下方。

在此处输入图像描述

这是示例代码

0 投票
1 回答
2350 浏览

ios - 添加到 Xcode Interface Builder 的材料组件 MDCTextField 不接受用户输入

我使用 Cocoapods 将 MaterialsComponents 与新的 Xcode 项目集成,并通过 Workspace 进入 Xcode。然后,我创建了一个非常基本的界面,其中一个 UITextField 添加到 main.storyboard。我做了一个没有错误的构建,简单的界面允许我将数据输入到 UITextField。

然后,复制 Google 在他们的 MDC-111 课中的代码示例,我将 UITextField 转换为 MDCTextField,以查看文本字段的特殊 Material Design 处理是否有效(即,占位符文本在我输入文本时向上移动)。我没有构建错误,并且项目在模拟器中正确构建,但不允许文本输入。单击该字段不会调出键盘并且不接受文本。我尝试将“启用用户交互”从 On 更改为 Off 并返回 On 无效。这是我的 Swift View Controller 代码:

0 投票
0 回答
249 浏览

javascript - Basic MDCSelect not displaying correctly

I can't get a basic select control working with MDC. Does anyone know what I'm doing wrong? (other mdc-components works just fine with on same setup)

UI-bug (PNG)

Javascript:

#xA;

CSS:

#xA;

HTML:

#xA;

0 投票
1 回答
673 浏览

javascript - MDCSnackbarFoundation 类用法

如何使用 MDCSnackbarFoundation ?使用 MDCSnackbar

该文档不够清晰,无法了解。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class

这是我的代码,我需要为它绑定 MDCSnackbarFoundation。

logger = new MDCSnackbar($selector[0]);

谢谢