sweetalert 2의 동일한 행에서 라벨을 정렬하고 드롭 다운을 선택합니다. [닫힘]

Question

sweetalert2를 사용하여 동일한 행에 레이블과 드롭 다운을 정렬 할 수있는 예를 찾고 있습니다.

이것을 달성하기 위해 사용자 정의 레이블을 추가하려고 시도했지만 다른 줄에 가고 있으며 확인 버튼을 클릭하면 선택한 드롭 다운을 콘솔하고 싶습니다.

아래는 내 stackblitz입니다.

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

Answer 1

inputLabel+ customClass매개 변수 사용 :

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> 

자세히 알아보기 customClass:https://sweetalert2.github.io/#customClass

Answer 2

일반 / 스타일 HTML을 사용하고 일반적으로 다음과 같이 드롭 다운 값을 잡을 수 있습니다.

 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
  }

   });