【问题标题】:Is it possible to add custom buttons to mat select dropdown?是否可以将自定义按钮添加到垫选择下拉列表?
【发布时间】:2020-05-14 19:07:37
【问题描述】:

是否可以像下面的照片一样添加自定义按钮(确定和取消),以便在多选垫下拉菜单中,用户不必在框外单击以关闭下拉菜单?

我没有在 Angular 文档中看到这个

<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

这是我目前所拥有的堆栈闪电战 https://stackblitz.com/edit/select-all-option-angular-material?file=src%2Fapp%2Fapp.component.html

【问题讨论】:

  • 可以分享demo链接吗?
  • 添加了堆栈闪电战
  • 这样的? https://stackblitz.com/edit/select-all-option-angular-material-6aexy8这种情况你需要处理事件
  • 是的,这行得通。您可以将此作为答案发布,以便获得赏金吗?
  • 添加了一个带有基本事件处理的版本。检查是否适合您

标签: html css angular


【解决方案1】:

这是一个带有基本事件处理的版本

https://stackblitz.com/edit/select-all-option-angular-material-uvu3eb

【讨论】:

  • 无插件,首选。
【解决方案2】:

您可以通过执行以下操作来制作“固定”页脚:

<mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected">
        <div class="custom-panel">
            <mat-option>None</mat-option>
            <mat-option value="option1">Option 1</mat-option>
            <mat-option value="option2">Option 2</mat-option>
            <mat-option value="option3">Option 3</mat-option>
        </div>
        <footer>
            <button mat-raised-button>Ok</button>
            <button mat-button>Cancel</button>
        </footer>
    </mat-select>
</mat-form-field>

和css:

// This one must be in the global style (or ng-deep but it's deprecated :( )
.mat-select-panel{
  overflow: hidden !important;
}

footer{
  border-top:2px solid gray; 
  height: 44px;
  padding-top: 10px;
  text-align:right;
}

.custom-panel {
  max-height: 200px; // mat-select-panel height = 256px. 200 + 10 + 44 + 2
  overflow: auto;
}

这里是the repro on stackblitz

尝试添加更多选项以查看滚动不会影响您的按钮。

它还可以像你的 stackblitz 中的魅力一样发挥作用。我只是用一个带有类的 div 更改了“页脚”。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-08-16
    • 2012-05-06
    • 1970-01-01
    • 2016-05-22
    • 2021-05-09
    • 2014-07-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多