gpt4 book ai didi

html - Material Design 组件选择菜单无法正确呈现网页

转载 作者:行者123 更新时间:2023-12-02 03:33:34 26 4
gpt4 key购买 nike

我正在尝试向我的网站添加基本的 MDC 选择菜单。但它并不完全正确 — 框的右侧显示了 MDC 箭头以及正常的 HTML 箭头,并且这些单词距离菜单标签太近 ( seen here )。

HTML 部分—

<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'));

看起来我已经拥有了我需要的一切,但我显然错过了一些愚蠢的东西。如有任何建议,我们将不胜感激 - 谢谢!

最佳答案

当这个问题最初被问到时,样式问题一定是来自问题中未显示的一些额外的 css 或 js(有关详细信息,请参阅编辑历史记录)。从那时起,MDC select 所需的标记组件已更改。请参阅以下代码片段以获取示例设置。

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>

关于html - Material Design 组件选择菜单无法正确呈现网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51092321/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com