对齐标签并在sweetalert 2的同一行中选择下拉菜单 [英] Align label and select dropdown in the same row in the sweetalert 2

问题描述

例如，我正在寻找可以使用sweetalert2在同一行中对齐标签和下拉列表的地方.

我尝试添加自定义标签来实现此目的，但是它在另一行中，我想通过单击确定"按钮来控制所选的下拉菜单.

下面是我的闪电战.

解决方案

使用 inputLabel + customClass 参数:

  Swal.fire({标题:在一行中选择+标签"，输入:选择"，inputOptions:{苹果:苹果"，香蕉:香蕉"，橘子:橘子"}，inputLabel:选择一种水果"，customClass:{输入:"inline-flex"，inputLabel:"inline-flex"}}) 

  .inline-flex {显示:inline-flex！important;保证金:.5em！重要;}  

 <脚本src ="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

了解有关 customClass 的更多信息: https://sweetalert2.github.io/#customClass

I am looking for example where I can align label and dropdown in the same row using sweetalert2.

I have tried to add custom label to achieve this but it is going in the different line and I would like to console the selected dropdown on click of OK button.

Below is my stackblitz.

https://stackblitz.com/edit/angular-sweetalert-dropdown

解决方案

Use inputLabel + customClass params:

Swal.fire({
  title: 'Select + label in one row',
  input: 'select',
  inputOptions: {
    apples: 'Apples',
    bananas: 'Bananas',
    oranges: 'Oranges'
  },
  inputLabel: 'Select a fruit',
  customClass: {
    input: 'inline-flex',
    inputLabel: 'inline-flex'
  }
})

.inline-flex {
  display: inline-flex !important;
  margin: .5em !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

Read more about customClass: https://sweetalert2.github.io/#customClass

这篇关于对齐标签并在sweetalert 2的同一行中选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！