Shoelace

「Shoelace」でアラートダイアログ（Alert）やトースト通知（Toast）作成する方法

2023年5月5日 by single コメントはまだありません

「Shoelace」でアラートダイアログ（Alert）やトースト通知（Toast）作成する方法

今回は「Shoelace」の『sl-alert』タグに紹介です。

タグ「<sl-alert>」

導入方法

JSファイルインクルード

「Shoelace」の全機能を利用する必要はなく、アラートに関連するJSファイルを読み込んでください。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/components/alert/alert.js"></script>

「Shoelace」の全機能を利用する場合は、以下のファイルを読み込んでください。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>

CSSファイルインクルード

「Shoelace」のCSSファイルをインクルードします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />

HTMLマークアップ

タグ「<sl-alert>」で定義します。

<sl-alert>
  ...
</sl-alert>

ダイアログにアイコンを設定したい場合には、タグ「sl-icon」を使い、かつ『slot』に『icon』を設定することで、アラート内にうまくアイコンを設定できます。

<sl-alert>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  ...
</sl-alert>

ただ、タグ「<sl-alert>」でアラートを定義しても、アラートは表示されません。

通常は、イベントを設定し、そのイベントでメソッド「show()」や「toast()」で表示させなければなりません。

初期表示させたい場合には、属性「open」を設定します。

<sl-alert open>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  ...
</sl-alert>

アラートダイアログ

デモ

標準アラート

サンプル

標準的なアラートです。表示内容やアイコンもカスタマイズできます。

HTMLコード

<sl-alert open>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  標準的なアラートです。表示内容やアイコンもカスタマイズできます。
</sl-alert>

閉じるボタン付きアラート

サンプル

閉じるボタン付きアラート
アラートをいつでも閉じることができます。

HTMLコード

<sl-alert variant="success" open closable class="alert-closable">
  <sl-icon slot="icon" name="info-circle"></sl-icon>
 <strong>閉じるボタン付きアラート</strong><br />
  アラートをいつでも閉じることができます。
</sl-alert>

属性「closable」を設定すれば、×（閉じる）ボタンが表示されます。

アラートの表示/非表示

サンプル

アラート表示 アラートダイアログ
アラートにアクション（マウスを乗せたりクリックなど）をしなければ、３秒後に閉じます。

HTMLコード

<div class="alert-duration">
  <h4>アラートの表示/非表示</h4>
  <sl-button variant="danger">アラート表示</sl-button>
  <sl-alert variant="primary" duration="3000" closable>
    <sl-icon slot="icon" name="info-circle"></sl-icon>
    <strong>アラートダイアログ</strong><br />
    アラートにアクション（マウスを乗せたりクリックなど）をしなければ、３秒後に閉じます。
  </sl-alert>

  <script>
    const container = document.querySelector('.alert-duration');
    const button = container.querySelector('sl-button');
    const alert = container.querySelector('sl-alert');
    button.addEventListener('click', () => alert.show());
  </script>

  <style>
    .alert-duration sl-alert {
      margin-top: var(--sl-spacing-medium);
    }
  </style>
</div>

メソッド『show()』を呼び出すことで、ダイアログを表示させることができます。

また、属性『duration』を指定すれば、ダイアログが表示している時間をミリ秒で指定できます。

トースト通知（トーストダイアログ）

「Shoelace」の「<sl-alert>」タグには、トースト通知機能もあります。

カラー

デモ

サンプル

主要（Primary） 成功（Success） 中立（Neutral） 警告（Warning） 危険（Danger） 情報ダイアログ
アラートダイアログメッセージ 変更を保存しました
アプリを安全に終了できます。 設定が変更されました
再ログインすると設定の変更が有効になります。 セッションが終了しました
再開するには再ログインしてください。 アカウントが削除されました
残念ではございますが、またのご利用をお待ちしております。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Shoelace Carousel demo(2)</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/translations/ja.js"></script>
  <!-- Shoelaceの定義を読み込むまで画面表示させないためのスタイルシート定義 -->
  <style>
    body {
      opacity: 0;
    }
    body.ready {
      opacity: 1;
      transition: 0.25s opacity;
    }
  </style>
</head>
<body>
  <div class="alert-toast">
    <sl-button variant="primary">主要（Primary）</sl-button>
    <sl-button variant="success">成功（Success）</sl-button>
    <sl-button variant="neutral">中立（Neutral）</sl-button>
    <sl-button variant="warning">警告（Warning）</sl-button>
    <sl-button variant="danger">危険（Danger）</sl-button>

    <sl-alert variant="primary" duration="3000" closable>
      <sl-icon slot="icon" name="info-circle"></sl-icon>
      <strong>情報ダイアログ</strong><br />
      アラートダイアログメッセージ
    </sl-alert>

    <sl-alert variant="success" duration="3000" closable>
      <sl-icon slot="icon" name="check2-circle"></sl-icon>
      <strong>変更を保存しました</strong><br />
      アプリを安全に終了できます。
    </sl-alert>

    <sl-alert variant="neutral" duration="3000" closable>
      <sl-icon slot="icon" name="gear"></sl-icon>
      <strong>設定が変更されました</strong><br />
      再ログインすると設定の変更が有効になります。
    </sl-alert>

    <sl-alert variant="warning" duration="3000" closable>
      <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
      <strong>セッションが終了しました</strong><br />
      再開するには再ログインしてください。
    </sl-alert>

    <sl-alert variant="danger" duration="3000" closable>
      <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
      <strong>アカウントが削除されました</strong><br />
      残念ではございますが、またのご利用をお待ちしております。
    </sl-alert>
  </div>

  <script>
    const container = document.querySelector('.alert-toast');
    ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
      const button = container.querySelector(`sl-button[variant="${variant}"]`);
      const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
      button.addEventListener('click', () => alert.toast());
    });
  </script>

  <script type="module">
    // ロードし終わってから表示
    document.body.classList.add('ready');
  </script>
</body>
</html>

アラートダイアログを表示する際、「toast()」メソッドを利用すると、トースト通知として表示されます。デフォルトでは右上にアラートダイアログが表示されます。

カラーを変えるには？

属性「variant」を指定することで色を変更することができます。

「variant」に指定できる文字列は以下の通りです。

  • primary
  • success
  • neutral
  • warning
  • danger

デフォルトは『primary』です。

トースト通知の位置

デモ

サンプル

上部バナー

左上 右上
左下 右下

下部バナー

情報ダイアログ
アラートダイアログメッセージ 変更を保存しました
アプリを安全に終了できます。 設定が変更されました
再ログインすると設定の変更が有効になります。 セッションが終了しました
再開するには再ログインしてください。 アカウントが削除されました
残念ではございますが、またのご利用をお待ちしております。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Shoelace Carousel demo(3)</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/translations/ja.js"></script>
  <!-- Shoelaceの定義を読み込むまで画面表示させないためのスタイルシート定義 -->
  <style>
    body {
      opacity: 0;
    }
    body.ready {
      opacity: 1;
      transition: 0.25s opacity;
    }
  </style>
</head>
<body>
  <div class="alert-toast">
    <sl-button variant="primary"  hoge="top_banner.css">上部バナー</sl-button><br /><br />
    <sl-button variant="success" hoge="left_top.css">左上</sl-button> 
    <sl-button variant="warning" hoge="#">右上</sl-button><br />
    <sl-button variant="neutral" hoge="left_bottom.css">左下</sl-button>
    <sl-button variant="danger" hoge="right_bottom.css">右下</sl-button><br /><br />
    <sl-button variant="primary" hoge="bottom_banner.css">下部バナー</sl-button><br /><br />

    <sl-alert variant="primary" duration="30000" closable>
      <sl-icon slot="icon" name="info-circle"></sl-icon>
      <strong>情報ダイアログ</strong><br />
      アラートダイアログメッセージ
    </sl-alert>

    <sl-alert variant="success" duration="3000" closable>
      <sl-icon slot="icon" name="check2-circle"></sl-icon>
      <strong>変更を保存しました</strong><br />
      アプリを安全に終了できます。
    </sl-alert>

    <sl-alert variant="neutral" duration="3000" closable>
      <sl-icon slot="icon" name="gear"></sl-icon>
      <strong>設定が変更されました</strong><br />
      再ログインすると設定の変更が有効になります。
    </sl-alert>

    <sl-alert variant="warning" duration="3000" closable>
      <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
      <strong>セッションが終了しました</strong><br />
      再開するには再ログインしてください。
    </sl-alert>

    <sl-alert variant="danger" duration="3000" closable>
      <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
      <strong>アカウントが削除されました</strong><br />
      残念ではございますが、またのご利用をお待ちしております。
    </sl-alert>
  </div>

  <script>
    const container = document.querySelector('.alert-toast');
    [ 'primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
      const buttons = container.querySelectorAll(`sl-button[variant="${variant}"]`);
      const toastDialog = container.querySelector(`sl-alert[variant="${variant}"]`);
      for ( var i=0; i < buttons.length; i++ ) {
        const button = buttons[i];
        button.addEventListener('click',function () { 
          const cssLink = document.querySelector('#cssLink');
          /* CSSの定義を読み直す */
          cssLink.href = button.getAttribute('hoge');
          toastDialog.toast();
        });
      }
    });
  </script>

  <!-- クラス『sl-toast-stack』の定義をCSSファイルにして読み込みます -->
  <link href="#" rel="stylesheet" id="cssLink">

  <script type="module">
    // ロードし終わってから表示
    document.body.classList.add('ready');
  </script>
</body>
</html>
CSSファイル（左上）『left_top.css』
/* 左上 */
.sl-toast-stack {
  left: 0;
  bottom:auto;
  top:0;
  right: auto;
}
CSSファイル（左下）『left_bottom.css』
/* 左下 */
.sl-toast-stack {
  left: 0;
  bottom:0;
  top:auto;
  right: auto;
}
CSSファイル（右下）『right_bottom.css』
/* 右下 */
.sl-toast-stack {
  left:auto;
  bottom:0;
  top:auto;
  right: 0;
}
CSSファイル（上部バナー）『top_banner.css』
/* 上部バナー */
.sl-toast-stack {
  left: 0;
  top:0;
  width:100%;
}
CSSファイル（下部バナー）『bottom_banner.css』
/* 下部バナー */
.sl-toast-stack {
  left: 0;
  bottom:0;
  top:auto;
  right: auto;
  width:100%;

}

トーストの表示位置を変えるには？

トーストの表示位置を変えるにはCSSクラス『sl-toast-stack』で定義してください。

スタイルシートで「top」「bottom」「right」「left」などを指定することで表示位置を変えることができます。

ご参考

関連記事

ようこそ、Single Life Tokyoへ
「Shoelace」でアラートダイアログ（Alert）やトースト通知（Toast）作成する方法をご紹介します。