Richten Sie das Etikett aus und wählen Sie das Dropdown-Menü in derselben Zeile im Sweetalert 2 aus [geschlossen]

Jan 05 2021

Ich suche zum Beispiel, wo ich mit sweetalert2 Beschriftung und Dropdown in derselben Zeile ausrichten kann.

Ich habe versucht, ein benutzerdefiniertes Etikett hinzuzufügen, um dies zu erreichen, aber es wird in der anderen Zeile angezeigt, und ich möchte das ausgewählte Dropdown-Menü beim Klicken auf die Schaltfläche OK trösten.

Unten ist mein Stackblitz.

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

Antworten

1 LimonMonte Jan 06 2021 at 01:52

Verwenden Sie inputLabel+ customClassparams:

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> 

Lesen Sie mehr über customClass:https://sweetalert2.github.io/#customClass

1 AhmedMaher Jan 05 2021 at 11:42

Sie können normales / gestyltes HTML verwenden und den Dropdown-Wert normalerweise wie folgt abrufen:

 Swal.fire({

  showCancelButton: true,
  type: "warning",
  html: ` select reason <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          </select>`,

  preConfirm: function() {
  var elm = document.getElementById("cars");
  alert(elm.value); // use user selected value freely
  }

   });