Prompt

質問をパネルの上に置き、回答の選択肢を全幅のボタンで並べます。

下のメールはどれに近いですか?

移動のリンクの選択肢・尾なし

最初に何をしますか?

狭い場所:選択肢を縦に積む

この差出人からのメールを受け取りますか?

右から左に読む場合

كيف تصف هذه الرسالة؟

使いどころ

  • すぐ下の対象について「どれに近いか」「最初に何をするか」など、作業の流れの中で一つの答えを求める時に使います。
  • 作業を止めて確認や判断を求める時は Dialog を使います。
  • フォームの中で値を選ぶ時は、Field と CheckboxGroup や Select を使います。
  • 見出しと中身をまとめるだけで答えを求めない時は LayerCard を使います。

使い方

Basecamp 2の繰り返す予定の変更を確かめるパネルと同じ形です。LayerCard の形を白い一枚のパネルにし、ポップオーバーと同じ1px #bbbbbb の枠・角丸5px・外への柔らかい影を、尾も含めた輪郭に沿って落とします。question は帯を敷かずに見出しの赤の13pxの太字で上に書き、choices はその下に全幅の控えめなボタン(白、1px #cccccc、下に1px #dddddd、角丸5px)を4px空けて縦に並べます。ボタンの中は title を12pxの黒の通常の太さで中央に書き、description を灰色の11pxで下に添えます。パネルの上下左右の余白は20pxです。ホバー・押した時・フォーカスは控えめな Button と同じです。

href を渡した選択肢は移動のリンク、渡さない選択肢は type="submit" のボタンになり、name と選択肢の value を送ります。フォームはPromptの外側に利用側が置き、答えの保存も利用側で行います。

dismiss には、選ばずに閉じる操作(「今は答えない」の ActionLink など)を渡し、見出しの行の終わりに置きます。閉じた後にまた出すかどうかは利用側で決めます。

既定でカードの下に、深さ11px・付け根22pxの白い三角の尾を付け、すぐ下の対象を指します。カードの1pxの枠は、そのまま尾の縁へ一本の線でつながります。尾はカードの外に出るので、下の対象との間を16px以上空けます。尾が要らない時は pointer={false} にします。

行は複数行の文を持つ専用の操作で、文字の指定は prompt.css が持ちます。利用側のCSSで行の文字を上書きしません。JavaScriptは使いません。

アクセシビリティ

  • 全体は section で、question を読み上げ名と見出し(h3)にします。
  • 選択肢はリンクかボタンなので、Tabで順に移り、リンクはEnter、ボタンはEnterかSpaceで答えます。輪のマークと矢印の要素は表示せず、読み上げからも外します。

API

Prompt

判断を依頼する問いかけ。BC2の繰り返す予定の変更を確かめるパネルと同じく、1px #bbbの枠の白いパネルの上に問いを赤の太字で置き、その下に選択肢を全幅の控えめなボタンで並べる。ボタンは要点と灰色の説明を中央に書き、押すとその答えを選ぶ。尾ですぐ下の対象を指せる。輪のマークと進む矢印の要素はHTMLに残るが、表示しない。選択肢の行は複数行の文を持つ専用の操作で、文字の指定はprompt.cssが持つ。

Promptのprops
名前型既定値説明
question必須string問い。上端の見出し(h3)に赤の太字で書き、読み上げ名(aria-label)にもする。
choices必須readonly PromptChoice[]答えの行。並べた順に上から置く。
namestringボタンの選択肢が送る名前。
dismissChild選ばずに閉じる操作(「今は答えない」など)。見出しの行の末尾に置く。
pointerbooleantrueカードの下に尾を付けて、すぐ下の要素を指す。カードの枠は尾の縁へつながる。falseで尾を外す。

ほかのpropsはLayerCardへそのまま渡します。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/section.css、components/icon.css、components/layer-card.css、components/prompt.css

PromptChoice

PromptChoice
名前型既定値説明
value必須string送信のボタンの時にnameと一緒に送る値。hrefを渡した選択肢では使わない。
title必須string選択肢の要点。太字で書く。
descriptionChild要点の下に添える説明。
hrefstring渡すと移動のリンク、無ければ送信のボタン(nameとvalueを送る)。

コード

HTML
Hono JSX