Popover API さわってみた

2023/07/05 16 users dialog トースター コンポーネント ユーザー コンテンツ

Chrome 114からPopover APIがサポートされました。 Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 基本的な使い方からdialogとの使い分けまで調べたのでまとめたいと思います。 基本的な使い... 続きを読む

これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります

2023/06/08 279 users UIコンポーネント 開閉 フォーカス HTML ポップオーバー

先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに... 続きを読む

Popover API - JavaScript不要、HTMLのみでポップオーバーUI

2023/02/19 99 users HTML 属性 ポップオーバー ところ 4つ

4つの属性 まずはHTMLの属性が新しく追加されているところに注目しましょう。 popover属性 ポップオーバーターゲット属性 popovertoggletarget属性 popoverhidetarget属性 popovershowtarget属性 以上の4つが追加されました。popover属性はポップオーバーする要素自体に。ポップオーバーターゲット属性はそれを展開する... 続きを読む