标签: mdc-components

我目前正在使用“手动实例化”方法，效果很好。我注意到“自动实例化”方法，但无法让它工作。使用这种方法具体需要什么？

当我使用代码时：

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

我收到错误日志记录：“Uncaught ReferenceError：mdc 未定义”。

参考此处： https: //github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

谢谢。

我无法安装分叉的 git 存储库。我想安装版本#0.31.0。

yarn add https://github.com/Goldjan/material-components-web.git#v0.31.0

我收到以下错误：

C:\Users\qjan8\Websites\XXXXXX>yarn add https://github.com/Goldjan/material-components-web.git#v0.31.0
yarn add v1.7.0
[1/4] Resolving packages...
error Can't add undefined: invalid package version undefined.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

这必须是 的名称吗package.json？

我需要在 MDC 卡的标题之前添加一个图标，如图所示（标签 2）。但是，根据 MDC 设计，我不知道正确的 HTML。这是我迄今为止的卡片 HTML 代码：

<div class="mdc-card demo-card undefined">
    <div class="demo-card__primary">
        <h1 class="demo-card__title mdc-typography--headline6">Some Title</h1>
        <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 1
                </button>
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 2
                </button>
            </div>
        </div>
    </div>
</div>

有人可以指出我要添加的正确 HTML 吗？MDC 文档不是很清楚。

我正在尝试在点亮元素中使用 mdc 组件（例如 mdc-textfield）。看起来我必须将 css 和 js 文件导入到元素中。

我很不确定如何将 css 导入到 lit-element 中。

顺便说一句，我在没有任何预处理器或编译器的情况下使用polymer serve。

在我所有的Android应用程序中，我都实现了Material Design Components（MDC）依赖关系，AndroidX并且一切正常，直到将Android Studio更新到3.4稳定版本为止。该应用程序可以在模拟器和真实手机中编译并完美运行，但是Android Studio 的XML Layout Previewer 不会呈现任何MDC，并且Preview页面会冻结。

我已经尝试了很多事情，但没有一个可以解决我的问题：

• 更新至Android Studio 3.5 Canary或Dev
• 将targetSdkVersion和更改compileSdkVersions为28
• 重新安装Android Studio
• 使缓存无效并重新启动
• 使用不同的Theme.MaterialComponents变体

此XML布局预览器问题仅在其中至少包含1个MDC的布局中出现。如果没有这些组件，则一切正常。

我的styles.xml文件如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorGroupPrimary">@color/colorPrimary</item>
        <item name="colorGroupPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorGroupAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/montserrat</item>
        <item name="android:windowBackground">@drawable/splash_bg</item
</style>

即使我将其扩展AppTheme为Theme.MaterialComponents.Light.NoActionBar也不起作用。

我的build.gradle文件如下所示：

android {
    compileSdkVersion 28
    defaultConfig …

我一直在寻找Material design Material.io中的材料组件，一切都很好，我试图使用MDC的TextField组件创建一个材料下拉式微调器，但是我似乎找不到任何相关文档，是否有可能使用MDC创建微调器？如果是这样，我在哪里可以找到它的文档？

在那里看到TextField目录中的微调框，我可以这样做吗？：

目前正在使用 Material Design 组件和菜单指南设置 Exposed Dropdown 菜单项。但是，当显示我的自动完成文本视图时，它的背景与我的其他文本字段不同。

我尝试将 TextInputLayout 上的 boxBackgroundColor 属性设置为不同的颜色并修改自动完成 TextView 上的背景。此外，我已经厌倦了查看是否可以修改菜单的弹出主题但没有运气。

 // In the onCreateView of fragment

        ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(), R.layout.dropdown_menu_popup_item, getResources().getStringArray(R.array.down_payment_method_selection));
        monthsAtEmploymentSelection.setAdapter(adapter);

<com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                android:hint="@string/months_at_employment_hint"
                app:boxBackgroundColor="@color/white">

                <AutoCompleteTextView
                    android:id="@+id/months_at_employment_selection"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </com.google.android.material.textfield.TextInputLayout>

<!--dropdown_menu_popup_item.xml-->
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"
    android:background="@color/white"/>

我希望背景是透明的或与当前设置为白色的背景相匹配。目前它是与字段不匹配的灰白色。

我正在尝试更改 mdc-select 中下拉箭头的默认紫色：

sass mixin 似乎都没有做到这一点。

它是如何完成的？

这是我迄今为止尝试过的：

HTML

<div class="mdc-select mdc-select--outlined">
    <input type="hidden" name="enhanced-select">
    <i class="mdc-select__dropdown-icon"></i>
    <div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
        <ul class="mdc-list">
            <li class="mdc-list-item" data-value="41" role="option">41</li>
            <li class="mdc-list-item" data-value="42" role="option">42</li>
            <li class="mdc-list-item" data-value="43" role="option">43</li>
        </ul>
    </div>
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch">
            <label class="mdc-floating-label">Answer to Life</label>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
    </div>
</div>  

社会保障局

@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";

.mdc-select {
    @include mdc-select-ink-color(red);
    // @include mdc-select-container-fill-color(red);
    @include mdc-select-label-color(red);
    @include mdc-select-focused-label-color(red);
    @include mdc-select-bottom-line-color(red); …

我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 轮廓文本字段（带有前导图标）。Material.io 网站显示某些组件的 JavaScript 代码，但不显示其他组件的 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

我正在使用Material Design Components中的新Bottom App Bar。我试图在底部应用栏的顶部给阴影，就像Google Tasks应用中的阴影一样，如下所示。

我尝试同时使用android:elevation和app:elevation属性。请帮忙。

我们正在使用 MDC 菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。

我尝试将一个类应用于 mdc-list-item 并将光标指定为自动，但它不起作用。

.menu-do-not-close {
   cursor: auto !important;
}

下面是示例小提琴

https://jsfiddle.net/phani25485/Lt6q2gxa/2/

您能否就如何实现这一目标提供一些指导。

我的应用程序中有一个主要活动，其中包含Material Design Components中新的Bottom App Bar。在用户交互时，我替换了不同的片段。

为了使用户知道他们在应用程序中的当前位置，我决定将底部应用程序栏的标题设置为与片段的标题相同。但是，我无法设置标题，并且看到实现后，发现“底部应用栏不能具有标题”。

我想知道在这种情况下如何使用户知道他在应用程序中的位置，或者是否有任何方法可以设置底部应用程序栏的标题。

我正在使用名为“菜单”的 Material Design Web Components 组件。

启动菜单后，我需要能够轻松地处理“选择”“菜单项”的所有方式。通过我的框架的模板语言（vue）添加点击操作是可行的，但是，添加点击输入和其他键的方法不起作用。例子：

  <li
    v-for="option in options"
    :key="option"
    class="mdc-list-item"
    @click="onChange(option)" // this works
    @keyup.enter="onChange(option)" //this doesn't work
    role="menuitem">

我预计这是因为该enter键具有用于关闭菜单的事件处理程序，该事件处理程序正在捕获我的按键操作。我不太确定。

无论如何，处理选择的“正确”方法似乎是通过事件MDCMenu:selected。文档中的描述：

[ MDCMenu:selectedis] 用于指示何时选择了某个元素。此事件还包括所选项目和该项目的列表索引。

但是，没有关于如何捕获此事件的说明。我试过了：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.root.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这导致了很多undefined错误，这很奇怪，因为我可以访问它this.menu.root并且它似乎是一个 DOM 元素。

我也尝试过：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这引发了一个关于如何addEventListener不存在函数的错误this.menu；

我搜索了源代码，但没有发现任何有关事件处理或发出的明显信息。

我如何捕捉MDCMenu:selected事件？