LoginSignup
1

More than 3 years have passed since last update.

SweetAlertでメッセージ表示

Posted at

SweetAlertでメッセージ表示

基本情報

本家

概要

JavaScriptの標準装備でアラート、メッセージを出しても良いが、ひと手間加えて、お洒落にメッセージを表示する。

基本的な使い方

メッセージを出すだけ

4C2F4B81-4B95-43FE-A912-D86B9DBF3F8F_4_5005_c.jpeg

sweetAlertSample.js

function basicSample(){
    swal("基本の使い方");
}

タイトルとテキストをつける

B3D15906-35A7-4A0E-995A-A1EF9E1599DD_4_5005_c.jpeg

sweetAlertSample.js
function basicSample2(){
    swal("ここにタイトル!", "そして、ここにテキスト!");
}

アイコンをつける

D558C8C3-A779-4F5B-9EFA-0DCCB1B6ECF8_4_5005_c.jpeg

sweetAlertSample.js
function basicSample3(){
    swal("アイコンつき!", "ボタンも付いてる!", "success");
}

アイコンの使い分け

使用可能なアイコンは4種類。

success

BFC66868-6CF5-4C00-A577-6D6410B5A979_4_5005_c.jpeg

sweetAlertSample.js
function iconSample1(){
    swal({
        title: "success",
        text: "successのicon",
        icon: "success",
        button: "OK",
    });
}

error

11E3B688-BDCB-46D3-81DC-7BBE81FB190B_4_5005_c.jpeg

sweetAlertSample.js
function iconSample2(){
    swal({
        title: "error",
        text: "errorのicon",
        icon: "error",
        button: "OK",
    });
}

info

A8A6915E-D6E7-4206-9D26-C51CB089CB34_4_5005_c.jpeg

sweetAlertSample.js
function iconSample3(){
    swal({
        title: "info",
        text: "infoのicon",
        icon: "info",
        button: "OK",
    });
}

warning

EEBB3C38-9B60-4073-9001-5D9409729ADE_4_5005_c.jpeg

sweetAlertSample.js
function iconSample4(){
    swal({
        title: "warning",
        text: "warningのicon",
        icon: "warning",
        button: "OK",
    });
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1