Materialize-css 下拉列表

Materialize-css是一个现代化的前端CSS框架，它提供了许多UI组件的样式和功能，为开发者节省了大量时间和精力。

下拉菜单（Dropdown）是Materialize-css中的一种UI组件，用于显示一个菜单，并允许用户从菜单中选择一个选项。

安装

你可以通过以下方式来安装Materialize-css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

你也可以在npm上找到Materialize-css包，并使用npm进行安装：

npm install materialize-css

基本用法

下面是一个基本的使用Materialize-css下拉菜单的例子：

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">Option 1</a></li>
  <li><a href="#!">Option 2</a></li>
  <li><a href="#!">Option 3</a></li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems, {});
});
</script>

在这个例子中，我们创建了一个链接，通过为链接添加.dropdown-trigger类，将其标记为下拉触发器。data-target属性指定了与下拉菜单对应的菜单ID。然后，我们创建了一个包含三个选项的下拉菜单，并将其与触发器相关联，再通过初始化该下拉菜单来使其生效。

配置选项

你可以通过传递选项对象作为第二个参数来自定义下拉菜单的行为：

<script>
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var options = {
    constrainWidth: false,
    hover: true,
    coverTrigger: false
  };
  var instances = M.Dropdown.init(elems, options);
});
</script>

在这个例子中，我们将constrainWidth设置为false，这样下拉菜单的宽度将被自由扩展。我们将hover设置为true，因此下拉菜单在鼠标悬停时也可以启动。最后，我们将coverTrigger设置为false，这样下拉菜单不会将触发器完全覆盖。

你可以在Materialize-css的官方文档中找到更多可用的选项和设置。