问题标签 [material-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 投票
0 回答
78 浏览

css - 使用 MDC 库更新现有 CSS

谷歌最近发布了材料组件,这是一个强烈遵循材料设计语言的模块化组件库。

所以我想做的是用 MDC 类变量(只有变量,因为我不能改变当前类)来更新我现有的 CSS 类(web)。我尝试过使用 mixins(因为 MDC 附带了一个完整的库)。但是这些过于模块化,这使得很难将所有变量保留在单个 css 选择器中。

例子:

MDC 类选择器变量(来自导入的 MDC 样式表):

当前的:.current-button {background-color: none;)

理想情况下:.current-button {go to mdc-button--raised and set background-color: red;}

是否有任何选项可以将 css 变量从一个类选择器移动(和重复)到另一个?或者也许还有另一种方法可以将现有类的变量“链接”到另一个类?

0 投票
1 回答
559 浏览

javascript - 材料设计组件和 reactjs 输入字段

因此,我终于让 MDC 使用 React 并使用 Google 文档,我发现当用户单击输入字段时,我需要 reactjs 来运行以下 JS - 基本上标签应该移动到输入上方,以便用户可以键入- 就像我的纯 HTML / JS 演示https://codepen.io/russellharrower/pen/oeReEN

但是使用 reactjs 我注意到我无法将下面的代码放在渲染区域中,所以我想知道我将它放在哪里以及如何放置?

完整的 reactjs 代码已更新

最新更新 我已经添加了这两个函数但是出于某种原因 (function(){})(); 脚本,虽然它会发出警报等,但它不允许文本标签像 codepen.io 演示那样移动

0 投票
0 回答
48 浏览

javascript - 如何从 json 对象添加 mdc-web 子标题?

因此,我试图在某个类别的每个列表之前放置一个子标题。我正在使用 material.io,这是我的 AJAX 成功代码...

但是当我查看时,我得到了这个: https://i.imgur.com/wUQoFrK.png(它们都在底部)

我该如何解决?

0 投票
1 回答
1259 浏览

web - 您如何控制 material-components-web 中 mdc-form-field 的大小?

标题真的说明了一切。如何使用 mdc 控制表单元素内文本字段的宽度?我还注意到表单默认情况下不居中,而是与包含 mdc-layout-grid__inner 的左侧对齐。

0 投票
4 回答
5271 浏览

android - Android 中的 NavigationView 项填充

如何为 NavigationView 中的项目设置填充。我需要为项目设置 paddingLeft,因为我已经删除了图标。我尝试过的是这样,但它不起作用:

我的 Drawer.xml 文件的样式:

0 投票
0 回答
465 浏览

android - Android - 如何在我的项目中导入 android.support.design.testutils

我已经看到 material-components-android 库中存在一组测试组件: https ://github.com/material-components/material-components-android/tree/master/tests/javatests/android/support/设计/测试工具

我想使用TestUtilsActions.java来丰富可用的 espresso 测试操作集,click()例如typeText(aString). 似乎我可以拥有setEnabled(enabled),setClickable(clickable)等。

我已经在我的build.gradle文件中导入了库:

但我仍然无法到达那个testutils包裹: 在此处输入图像描述

谁能告诉我该怎么办?

0 投票
0 回答
147 浏览

swift - 当我不希望它时,MDRaisedButton 在 IBDesignable UIView 中更改颜色

当我在 IBDesignable UIView 中使用它时,我在设置 MDCRaised 的背景颜色时遇到问题。从我的日志中可以看出它在 viewWillAppear 和 viewDidAppear 之间的颜色变化。

自定义视图 SubmitButton 包含一个 MDCRaisedButton 和 2 个用于其 backgroundColor 和 titleLabel.text 的可检查属性。我在情节提要上对这些所做的更改看起来不错。当我在我的设备上运行应用程序时,文本已更新,颜色总是变回蓝色。

我的 SubmitButton 的代码是 -

我的 ViewController 中带有日志结果的代码是 -

现在我可以通过在我的视图中设置按钮的 backgroundColor 来解决这个问题,但这并不能解释为什么当我宁愿只在我的故事板中设置颜色而不是手动设置时它会变成蓝色每次我使用这个自定义 UIView 时的代码。我究竟做错了什么?我怎样才能解决这个问题?

0 投票
1 回答
661 浏览

javascript - 波纹效果在材质组件中不起作用 mdc-icon-toggle

刚从材料组件开始。我正在尝试mdc-icon-toggle,HTML 代码

JS代码

基本功能工作正常,我可以收听事件,但是当我单击图标时,涟漪效果无法正常工作,图标周围有阴影,从不消失了。我是否也缺少单选按钮?

0 投票
2 回答
1421 浏览

javascript - 材料组件:MDCCheckbox 中的更改事件不起作用

我正在使用材料组件的 MDCCheckbox 组件。这是html代码

我想听这个元素上的更改事件,所以我添加了监听器

但这不起作用。使用 MDCIconToggle 组件也是如此。这是正确的方法吗?

以及如何将其状态设置为不确定?

当我单击复选框时,涟漪效果会冻结。如何解决这个问题?文档太差了。

0 投票
2 回答
1097 浏览

reactjs - 材料组件 Web 和 React:无法读取未定义的属性“querySelector”;

我正在尝试利用 React 和 Material Components Web 构建一个模态组件。Modal 的可见性作为 props 从父状态继承:

一旦应用初始化出现错误“TypeError: Cannot read property 'querySelector' of undefined”</p>

当然,因为模态返回null,所以它确实如此。

所以我尝试将材质组件初始化为

在这种情况下,不再抛出错误,但显然组件没有初始化。

我没有想出一个模式来解决这个问题。同样,css 方法也不起作用(想法是从主容器切换 .someClass {display: none} )。

/** 解决了 **/

好的,我想出了一个解决问题的工作模式。问题出在应用程序的架构中,组件的封装不合适。

这是一个名为 Modal 的父组件:

比我们有子组件

我试图从不同范围的 MDCTextfield 元素中初始化和销毁​​。