Shoelace

「Shoelace」でダイアログ（Dialog）作成する方法

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

「Shoelace」でダイアログ（Dialog）作成する方法

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

タグ「<sl-dialog>」

導入方法

JSファイルインクルード

「Shoelace」の全機能を利用する必要はなく、ダイアログだけ利用したい場合には、ダイアログのJSファイル（dialog.js）だけ読む込むだけで利用できます

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.2.0/dist/components/dialog/dialog.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-dialog>」でダイアログを定義します。

<sl-dialog label="ダイアログ" class="dialog-overview" >
  ダイアログの内容
  <sl-button slot="footer" variant="primary" id="close1">閉じる</sl-button>
</sl-dialog>

属性「label」は、ヘッダ文字列になります。

必要に応じて、閉じるボタンも実装してください。

次に、ダイアログ呼び出し用のオブジェクトを設定します。ここでは「<sl-button>」で実装します。

<sl-dialog label="ダイアログ" class="dialog-overview" >
  ダイアログの内容
  <sl-button slot="footer" variant="primary" id="close1">閉じる</sl-button>
</sl-dialog>
<sl-button>ダイアログを開く</sl-button>

Javascriptコード追加

最後にJavascriptのコードを追加し、ダイアログの表示処理を追加します。

<script>
  const dialog1 = document.querySelector('.dialog-overview');
  const openButton1 = dialog1.nextElementSibling;
  const closeButton1 = dialog1.querySelector('#close1');
  openButton1.addEventListener('click', () => dialog1.show());
  closeButton1.addEventListener('click', () => dialog1.hide());
</script>

『ダイアログを開く』ボタンをクリックすると、メソッド『show()』を呼び出し、ダイアログを表示させています。

また、『閉じる』ボタンをクリックしたときには、メソッド『hide()』を呼び出し、ダイアログを閉じています。

デモ

ダイアログ（デフォルト）

サンプル

ダイアログの内容 閉じる ダイアログを開く

ダイアログ（横幅指定）

サンプル

横幅８００ｐｘのダイアログ内容. 閉じる 横幅指定のダイアログを開く

HTMLコード

<sl-dialog label="ダイアログ" class="dialog-width" style="--width: 800px;">
  横幅８００ｐｘのダイアログ内容.
  <sl-button slot="footer" variant="primary" id="close2">閉じる</sl-button>
</sl-dialog>
<sl-button>横幅指定のダイアログを開く</sl-button>

<script>
  const dialog2 = document.querySelector('.dialog-width');
  const openButton2 = dialog2.nextElementSibling;
  const closeButton2 = dialog2.querySelector('#close2');
  openButton2.addEventListener('click', () => dialog2.show());
  closeButton2.addEventListener('click', () => dialog2.hide());
</script>

styleで『–width』に値を設定することで、ダイアログの幅を設定できます。

ヘッダ領域に文字列を設定するには？

ヘッダに文字列を指定するには、属性「label」を設定し、値に設定したい文字列を指定してください。

確認ダイアログ（モーダルダイアログ）

設定しだいではモーダル（Modal）ダイアログ風にして、確認（confirm）ダイアログ風にすることもできます。

サンプル

確認ダイアログ 変更しますか？ OK 閉じる モーダルダイアログを開く

HTMLコード

  <sl-dialog class="dialog-deny-close" >
    <span slot="label"><strong>確認ダイアログ</strong></span>
    変更しますか？
    <sl-button slot="footer" variant="primary" id="OK">OK</sl-button>
    <sl-button slot="footer" id="cancel">閉じる</sl-button>
  </sl-dialog>
  <sl-button>モーダルダイアログを開く</sl-button>

<script>
  const dialog3 = document.querySelector('.dialog-deny-close');
  const openButton3 = dialog3.nextElementSibling;
  const closeButton3 = dialog3.querySelector('#cancel');
  openButton3.addEventListener('click', () => dialog3.show());
  closeButton3.addEventListener('click', () => dialog3.hide());
  // Prevent the dialog from closing when the user clicks on the overlay
  dialog3.addEventListener('sl-request-close', event => {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
  });
</script>

モーダルダイアログを実装するには、簡単にダイアログを閉じないようにする必要があります。

そこで、イベント『sl-request-close』を利用し、クローズ処理で『preventDefault();』を呼び出し、なかったことにします。

イベントの「source」には、『overlay』のほかに『close-button』『keyboard』などがあり、呼び出し要素で処理を無効にできます。

ヘッダなしダイアログ（テキストボックス初期フォーカス）

ヘッダ領域を非表示にもできます。

サンプル

閉じる 入力テキストボックスを開く（ヘッダなし）

HTMLコード

<sl-dialog label="ヘッダラベル（非表示）" class="dialog-focus" no-header=true>
  <sl-input autofocus placeholder="テキストボックスにフォーカスがきます"></sl-input>
  <sl-button slot="footer" variant="primary" id="close4">閉じる</sl-button>
</sl-dialog>
<sl-button>入力テキストボックスを開く（ヘッダなし）</sl-button>

<script>
  const dialog4 = document.querySelector('.dialog-focus');
  const input4 = dialog4.querySelector('sl-input');
  const openButton4 = dialog4.nextElementSibling;
  const closeButton4 = dialog4.querySelector('#close4');
  openButton4.addEventListener('click', () => dialog4.show());
  closeButton4.addEventListener('click', () => dialog4.hide());
</script>

ヘッダを非表示にするには？

属性「no-header」を設定し、『true』を設定することで、ヘッダ領域を非表示にできます。

フォーカスを設定するには？

「sl-input」の属性『autofocus』を設定すれば、初期表示時にでもフォーカスを設定できます。

初期表示でダイアログを表示

デモ

HTMLコード

<sl-dialog label="ダイアログ" class="dialog-overview" open="true">
  ダイアログの内容<br />
  <button id="close1"  style="float: right;">閉じる</button>
</sl-dialog>
<button>ダイアログを開く</button>
<script type="module">
  const dialog1 = document.querySelector('.dialog-overview');
  const openButton1 = dialog1.nextElementSibling;
  const closeButton1 = dialog1.querySelector('#close1');
  openButton1.addEventListener('click', () => dialog1.show());
  closeButton1.addEventListener('click', () => dialog1.hide());
</script>

初期表示でダイアログを表示するには？

属性「open」を設定し、『true』を設定することで、初期表示でダイアログを表示させることができます。

「<sl-dialog> 」の属性・プロパティ

属性・プロパティ

open

『true』にすると、ダイアログを開いた状態で表示します。

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

label

ヘッダ領域に設定する文字列を定義できる属性です。

ただし、HTMLタグを利用したい場合には、これを利用するのではなく、slotでlabelを指定してください。

<sl-dialog class="dialog-deny-close" >
  <span slot="label"><strong>確認ダイアログ</strong></span>
  変更しますか？
  <sl-button slot="footer" variant="primary" id="OK">OK</sl-button>
  <sl-button slot="footer" id="cancel">閉じる</sl-button>
</sl-dialog>

no-header

『true』にすると、ヘッダ領域が非表示になります。

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

ご参考

関連記事