これはすごい！ 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属性はポップオーバーする要素自体に。ポップオーバーターゲット属性はそれを展開する... 続きを読む

WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI

2021/12/06 19 users ライブラリ ナビゲーション 衝突 Floating UI 実装

WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。 フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI ... 続きを読む

新感覚”ポップオーバー”パンケーキをペロる！豊洲『Butter Premium』 | シネマズ by 松竹

2015/03/29 15 users シネマズ 松竹 あすか ユナイテッド シネマ豊洲

新感覚”ポップオーバー”パンケーキをペロる！豊洲『Butter Premium』 編集部公式ライターのアスカでございます。 映画館周辺で味わえるグルメ情報も皆様にご提供しているシネマズ。今回も筆者は東京・豊洲エリアからオススメ店をご紹介いたします。 映画を観たあとはスイーツでも食べてのんびりしたいですよね。そこで今回は、ユナイテッド・シネマ豊洲と同じ”アーバンドックららぽーと豊洲”の1階にあるパン... 続きを読む