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

2023/06/08 279 users UIコンポーネント 開閉 フォーカス Popover API

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

階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI - ICS MEDIA

2023/05/31 72 users 補足 API ICS MEDIA アクション ユーザー

階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI 2023年5月31日にリリースされたChrome 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために... 続きを読む

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

2023/02/19 99 users Popover API HTML 属性 ところ 4つ

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