Как с помощью SweetAlert2 получить заголовок и текст в отдельных строках с предупреждением Toast?

Я хотел бы иметь возможность использовать SweetAlert2 для уведомлений о рычании на моем веб-сайте. Я использую вариант тостов, и он отлично работает. Однако я хотел бы, чтобы заголовок и текст располагались в отдельных строках, а не в строке.

ОБНОВЛЕНИЕ. Итак, я проверил элемент, и он использует встроенный гибкий график. Ниже приведен выходной код предупреждения:

<div class="swal2-container swal2-top-end swal2-fade swal2-shown" style="overflow-y: auto;">
    <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-toast swal2-show" tabindex="-1" role="alert" aria-live="polite" style="display: flex;">
        <div class="swal2-header">
            <ul class="swal2-progress-steps" style="display: none;"></ul>
            <div class="swal2-icon swal2-error" style="display: none;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
            </div>
            <div class="swal2-icon swal2-question" style="display: none;"></div>
            <div class="swal2-icon swal2-warning" style="display: none;"></div>
            <div class="swal2-icon swal2-info" style="display: none;"></div>
            <div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;">
                <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
                <div class="swal2-success-ring"></div>
                <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
            </div><img class="swal2-image" style="display: none;">
            <h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
            <button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button>
        </div>
        <div class="swal2-content">
            <div id="swal2-content" style="display: block;">You are now logged in!</div>
            <input class="swal2-input" style="display: none;">
            <input type="file" class="swal2-file" style="display: none;">
            <div class="swal2-range" style="display: none;">
                <input type="range">
                <output></output>
            </div>
            <select class="swal2-select" style="display: none;"></select>
            <div class="swal2-radio" style="display: none;"></div>
            <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
                <input type="checkbox"><span class="swal2-label"></span></label>
            <textarea class="swal2-textarea" style="display: none;"></textarea>
            <div class="swal2-validation-message" id="swal2-validation-message"></div>
        </div>
        <div class="swal2-actions" style="display: none;">
            <button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: none; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>
            <button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button>
        </div>
        <div class="swal2-footer" style="display: none;"></div>
    </div>
</div>

Код заголовка:

<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>

а текстовый код:

        <div class="swal2-content">
            <div id="swal2-content" style="display: block;">You are now logged in!</div>
            <input class="swal2-input" style="display: none;">
            <input type="file" class="swal2-file" style="display: none;">
            <div class="swal2-range" style="display: none;">
                <input type="range">
                <output></output>
            </div>
            <select class="swal2-select" style="display: none;"></select>
            <div class="swal2-radio" style="display: none;"></div>
            <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
                <input type="checkbox"><span class="swal2-label"></span></label>
            <textarea class="swal2-textarea" style="display: none;"></textarea>
            <div class="swal2-validation-message" id="swal2-validation-message"></div>
        </div>

С основной текстовой частью:

<div id="swal2-content" style="display: block;">You are now logged in!</div> Надеюсь, это поможет.

Вот что он выводит:

Это то, что он выводит

Вот так хотелось бы, чтобы это выглядело:

Вот так я бы хотел, чтобы это выглядело

ОБНОВЛЕНИЕ 2:

Благодаря помощи alekstrust у меня теперь есть код, который делает то, что мне нужно. Ниже приведен полный CSS, который я использовал:

.swal2-container .swal2-popup.swal2-toast {
    flex-direction: column;
    align-items: start;
    position: relative;
}

.swal2-container .swal2-icon {
    position: absolute;
    top: 50%;
    margin-top: -20px !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
    margin-left: 50px;
    text-align: left;
}

javascript sweetalert2
person tvirelli    schedule 05.09.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Эти стили будут выполнять часть работы:

.swal2-container .swal2-popup.swal2-toast {
  flex-direction: column;
  align-items: start;
}

.swal2-container .swal2-popup.swal2-toast .swal2-content {
  margin-left: 50px;
}

Однако не самое лучшее выравнивание значков.

Обновлять

Так будет лучше:

.swal2-container .swal2-popup.swal2-toast {
  flex-direction: column;
  align-items: start;
  position: relative;
}

.swal2-container .swal2-icon {
  position: absolute;
  top: 13px;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
  margin-left: 50px;
}

См. https://codepen.io/alekstrust/pen/dybJXMo.

person alekstrust    schedule 05.09.2019
comment
Мне очень нравится, что это решение только на CSS. Единственное, чего не хватает, - это вертикальное выравнивание значка в уведомлении, как на изображении, которое я показал выше. - person tvirelli; 05.09.2019
comment
Обновлены стили для более точных результатов. - person alekstrust; 06.09.2019
comment
Спасибо! Таким образом, это не было на 100% идеальным, как если бы в сообщении было более одной строки, тогда значок все еще не центрирован, но я испортил CSS и изменил top:13px на top:50%, а затем я сделал margin-top: 20px !important, поскольку 20 пикселей - это половина высота иконы. Также пришлось установить text-align: left. Я добавил ваш код плюс мой добавленный код в свое исходное сообщение. Спасибо за твою помощь. - person tvirelli; 06.09.2019

arrow_upward
0
arrow_downward

Вы всегда можете использовать параметр html для достижения индивидуального внешнего вида:

Swal.fire({
  type: 'success',
  html: `
    <div style="text-align: left; margin-left: 10px">
      <strong>Welcome!</strong><br>
      You are now logged in!
    </div>`,
  toast: true,
  showConfirmButton: false
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

person Limon Monte    schedule 05.09.2019

arrow_upward
0
arrow_downward

Этот CSS исправляет тосты, но не влияет на всплывающие окна ...

.swal2-container .swal2-toast { 
  flex-direction: column;
  align-items: start;
  position: relative;
  min-height: 57px;
}

.swal2-container .swal2-toast .swal2-icon {
  position: absolute;
  top: 9px;
}

.swal2-container .swal2-toast .swal2-title,
.swal2-container .swal2-toast .swal2-content {
  margin-left: 50px;
  text-align: left;
}
person xcartmods    schedule 19.11.2019