web-dev-qa-db-ja.com

SweetAlertテキストのフォーマット

ダイアログボックスの表示にsweetAlertを使用しています。ダイアログボックス内で、間に改行を入れた大きな文字列を表示する必要があります。私のサンプル文字列は次のとおりです：

var str="Task1Name          :    Success  :   statusCode\n 
         Task2NameLonger    :    Failed   :   statusCode\n"

等々。したがって、基本的には、それぞれを新しい行に入れ、スペースを一致させます。 sweetalertダイアログボックスを使用すると、改行が正しく表示されますが、テキストは自動的に中央に揃えられ、スペースは切り捨てられます。誰かが手動で私の配置と間隔を設定するのを手伝ってくれる？

javascriptsweetalert
6
Nagireddy Hanisha

文字列を<pre>タグにラップすると、解決策になる可能性があります。

var str="Task1Name          :    Success  :   statusCode\n" +
        "Task2NameLonger    :    Failed   :   statusCode\n";
         
Swal.fire({
  html: '<pre>' + str + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
});
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

PS。元の甘い警告プラグインはサポートされていません。 SweetAlert2 プラグインを使用することをお勧めします。

移行は簡単です。移行ガイドは次のとおりです： SweetAlertからSweetAlert2への移行

9
Limon Monte

Sweetalert2に切り替えると、HTMLを使用できます。

swal({ title: 'hi', html: 'First line<br>Second line' });
0
Jeremy Benks

また、swal（2）を使用して（大量の）テキストを表示する必要があり、テキストの大部分を表示したい左整列し、最後の行を中央に配置します。
最初に、customClass: 'swal-breit',を使用してCSSを適用し、CSSで幅と配置を設定しようとしました。
しかし、これは私のケースでは機能しません...

CSSは私のケースでは機能しないようですので、HTML（段落と配置）を使用して実装しました。私の（奇妙な）関数（組み込みswalを使用）では、最初にvariableをHTMLコードで作成し、次にプロパティhtml:を変数に設定します。
短い説明：最初に多くのテキストが表示され（左揃え）、次に質問が表示されます（中央）。
ユーザーが「Ja」をクリックすると（はい）、特定のページ（ビュー）が読み込まれ、「Nein」をクリックすると（いいえ）、何も起こりません（swalが閉じられず、ユーザーがページにとどまります（ビュー） ）。

ここに投稿するために簡略化されたコード）（ドイツ語）：

function MySwalFunction() {
  var Meldungstext = "";
  Meldungstext = Meldungstext + '<p align="left"> text in paragraph here.. <strong>strong text kere...</strong> further normal text with line break. <br>'
  Meldungstext = Meldungstext + 'Second line of text </p>'
  Meldungstext = Meldungstext + '<p align="left"> second paragraph block.. with linebreak <br>'
  Meldungstext = Meldungstext + 'second line to second block </p>' 
  Meldungstext = Meldungstext + '<p align="left">tex ti third paragraph here </p>'
  Meldungstext = Meldungstext + '<strong>Last line WITHOUT paragraph = is showed centered (swal default) </strong>'

  swal.fire({
    title: '! Achtung !',
    html: Meldungstext,
    icon: 'question',
    showCancelButton: true,
    width: '90%',
    confirmButtonColor: 'blue',
    cancelButtonText: 'Nein',
    confirmButtonText: 'Ja',
  }).then(function (result) {
    if (result.value) {
      var hostname = window.location.Origin;
      var xlink = hostname + "/main/sub/"
      location.href = xlink;
    }
    else {
    }
  })
}
0
FredyWenger