1

我正在尝试向我的网站添加一个基本的 MDC 选择菜单。但它并不完全正确——框的右侧显示了 MDC 箭头以及正常的 HTML 箭头，并且这些词放置在离菜单标签太近的位置（参见此处）。

HTML 部分——</p> 

<div class="mdc-select mdc-select--box day-select">
  <select class="mdc-select__native-control" required>
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

app.scss 部分

@import "@material/select/mdc-select";

和最后的 app.js 部分

import {MDCSelect} from '@material/select';
new MDCSelect(document.querySelector('.day-select'));

似乎我拥有我需要的一切，但我显然错过了一些愚蠢的东西。任何建议表示赞赏 - 谢谢！

4

2 回答 2

3

最初提出此问题时，样式问题一定来自问题中未显示的一些其他 css 或 js（有关详细信息，请参阅编辑历史记录）。从那时起，MDC 选择组件所需的标记发生了变化。有关示例设置，请参阅以下代码段。

const select = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
  console.log(select.selectedIndex, select.value);
});
.mdc-select__anchor,
.mdc-select__menu {
  width: 400px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Select Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <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="mdc-select">
  
    <div class="mdc-select__anchor">
      <i class="mdc-select__dropdown-icon"></i>
      <div class="mdc-select__selected-text"></div>
      <span class="mdc-floating-label">Pick a Food Group</span>
      <span class="mdc-line-ripple"></span>
    </div>
    
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
      <ul class="mdc-list">
        <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
        <li class="mdc-list-item" data-value="grains">
          <span class="mdc-list-item__text">
            Bread, Cereal, Rice, and Pasta
          </span
        </li>
        <li class="mdc-list-item" data-value="vegetables">
          <span class="mdc-list-item__text">
            Vegetables
          </span>
        </li>
        <li class="mdc-list-item" data-value="fruit">
          <span class="mdc-list-item__text">
            Fruit
          </span>
        </li>
      </ul>
    </div>
    
  </div>

</body>

</html>

于 2018-06-29T02:03:10.640 回答
1

我刚刚添加了这段代码来解决这个问题：

.mdc-select__native-control {
    -webkit-appearance: none;
    -moz-appearance: none;
}

我发现只有在使用 Node.js 模块中的 MDC 时才会出现此问题。MDC Node 模块中的类.mdc-select__native-control不包含上述两个属性。尽管它们material-components-web.min.css来自 CDN。

于 2019-09-06T08:52:57.293 回答