您的位置: 首页  >  技术问答  >  如何通过按钮使用角度材质选择(无表单字段)

如何通过按钮使用角度材质选择(无表单字段)

分类: 技术问答 • 2022-04-03 00:29:13

如何通过按钮使用角度材质选择(无表单字段)

问题描述：

我想使用不带 mat-form-field 的棱角材质 mat-select 组件，我希望它在概念上与本机select元素相似.有办法实现吗?

I would like to use the angular material mat-select component without the mat-form-field, I want it to be conceptually similar to the native select element. Is there a way to achieve that?

答

一种简单的方法是使用 mat-menu 并在单击按钮时更新触发器.

A simple approach is to use a mat-menu and update the trigger on button-click.

使用mat-menu组件演示.

如果您不想使用菜单，而是要使用 mat-select ，这是一种使用select组件的解决方案，它还可以确保在打开时将面板正确放置:

If you don't want to use a menu but a mat-select, here is a solution which uses the select component and also ensures the panel is positioned properly when opened:

使用mat-select组件进行演示

  1. 将 select 插入 button 组件中.
  2. 定位并调整所选内容的大小以覆盖按钮.
  3. 将 select 不透明度设为0，以使其不可见.
  4. 在按钮 click 上调用 open()方法.
  1. insert the select in a button component.
  2. position and size the select to cover the button.
  3. make the select opacity 0 so it's not seen.
  4. call the open() method on button click.

相关推荐