Dialog ダイアログ · kf-dialog
確認や短い入力のために画面の上に重ねる窓。native の dialog を使う。
HTML
<dialog class="kf-dialog" open>
<div class="kf-dialog-head"><h2>削除しますか</h2></div>
<div class="kf-dialog-body"><p>項目 B を削除する。元に戻せない。</p></div>
<div class="kf-dialog-foot"><button class="kf-btn" value="cancel">やめる</button><button class="kf-btn kf-btn-danger" value="ok">削除する</button></div>
</dialog><dialog class="kf-dialog">にkf-dialog-head(h2)・kf-dialog-body・kf-dialog-foot。開くのはel.showModal()、閉じるのはel.close()かform method="dialog"。- 題は「何をするか」の疑問か動詞(「削除しますか」「名前を変える」)。本文は 1〜2 文で、結果と戻せるかを書く。
- ボタンは右寄せで 2 つまで。右が主(動詞)、左が「やめる」。取り消しできない操作の主ボタンは
kf-btn-danger。 - 幅は 480px まで。長いフォームや一覧はダイアログに入れず、画面にする。
- 背景は
inkの半透明。ダイアログの外を押して閉じる動きは付けない(入力が消える)。Esc は native のまま効く。