k8o

← Playgrounds一覧に戻る
HTMLデモ3

Invoker Commands API

commandforとcommand属性でDialogやPopoverを操作する

Dialogの操作

command="show-modal"とcommandforだけで、JavaScriptを書かずにdialogをモーダル表示・閉じられます。

このDialogはInvoker Commands APIで開かれました。

JavaScriptを使わず、HTML属性だけで操作しています。

Popoverの操作

command="toggle-popover"と従来のpopovertargetを並べ、同じPopoverを両方式で開閉できることを比較します。

Invoker Commands API

Popover API

Popoverの内容

どちらのボタンでも同じPopoverを操作できます。

カスタムコマンド

「--」接頭辞のカスタムコマンドをcommandイベントで受け取り、画像の拡大・縮小・リセットを行います。

k8o

カスタムコマンド(--zoom-in--zoom-out--reset)で操作しています。