使用 SweetAlert2 如何在带有 Toast 警报的不同行上获取标题和文本？

Question

我希望能够将 SweetAlert2 用于我网站上的 "growl" 通知。我正在使用 Toast 选项并且效果很好。但是，我希望标题和文本各占一行，而不是内联。

更新： 所以我检查了元素，它正在使用内联 flex。以下是警报的输出代码：

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

header代码是：

<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;
}

Answer 1

这些样式可以完成部分工作：

.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

Answer 2

您始终可以使用 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>

Answer 3

这 CSS 修复了 toasts，但不影响弹出窗口...

.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;
}

使用 SweetAlert2 如何在带有 Toast 警报的不同行上获取标题和文本？

With SweetAlert2 how can I get the title and text on separate lines with a Toast alert?

javascript

sweetalert2

更新