使いやすい(個人の感想)(人による)
考えたこと
- せっかく
<dialog>
があるので使いたい - props に boolean を渡したらダイアログが開閉する
- もちろんモーダルで
- テキストだけ設定すれば使えるようにしたい
- フォームなどを表示できるように slot も渡せるようにしたい
- OK とキャンセルのボタンを入れ替え可能にしたい
dialog 要素について
- いい感じに背景が暗くなる
- しかも
backdrop
疑似要素としてカスタマイズできる
- しかも
- 勝手に一番手前に表示される
- ESC で閉じられる
- アクセシビリティ対応が最初から結構できている
コード&動作
今回対応できなかったところ
- フォーカス移動ができていない気がする
- 背景のスクロールを止めるのができていない気がする
- 型定義はもっと頑張れそう?
title
,content
が存在するときは slot が存在しないとか、その逆とか
- 同じダイアログを複数同時に表示するのができない
- ESC で閉じたときに、それを検知できない
やればできるはず。 型はどうだろうか……
ところで
ダイアログが増えがちで困ってる。 SPA でのダイアログ管理ってどうやるのがいいんだろう?