Sejajarkan label dan pilih dropdown di baris yang sama di sweetalert 2 [tutup]

Question

Saya mencari contoh di mana saya dapat menyelaraskan label dan dropdown di baris yang sama menggunakan sweetalert2.

Saya telah mencoba menambahkan label khusus untuk mencapai ini tetapi itu akan berada di baris yang berbeda dan saya ingin menghibur dropdown yang dipilih dengan mengklik tombol OK.

Di bawah ini adalah stackblitz saya.

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

Answer 1

Gunakan 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> 

Baca lebih lanjut tentang customClass:https://sweetalert2.github.io/#customClass

Answer 2

Anda dapat menggunakan html biasa / bergaya dan menangkap nilai tarik-turun secara normal sebagai berikut:

 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
  }

   });