Wing

childrenに作業面を、start・endに左右のパネルを渡します。作業面にはSurfaceなど背景を持つ面を置きます。各パネルはlabel・contentと、任意のicon・openを受け取ります。openの既定は展開です。

開閉はdetails/summaryで動くので、controllerを登録しなくても開閉できます。

パネルは作業面の後ろに重ねる物なので、AppShellのtrailの背後のシートと同じく、淡い灰色（#f9f9f9）の面に1px #e5e5e5 の枠を引いた、影の無い角丸3pxのパネルです。見出しは13pxの黒い太字です。ハンドルはアイコンだけのButtonと同じ形で、閉じている間は控えめな白いボタン、開いている間はチェックボックスの選んだ状態と同じ淡い青の縦の塗りに紺の縁と紺のアイコンにします。アイコンを渡さない時は開閉の向きを示す矢印を出します。

Wingの幅が56rem以上では、14remのパネルを作業面の後ろへ差し込みます。閉じると作業面の縁からパネルを少しだけのぞかせ、ハンドルをパネルの外側の縁にまたがせて置きます。名前はハンドルにホバーした時のツールチップで示します。開くとパネルが外側へ出て、上端にハンドルと名前の見出しが並びます。見出しの行は帯の塗りを持たず、下にパネルの枠と同じ1pxの罫線を引きます。開閉はその場で切り替え、動きは付けません。左右の列は開閉に関わらず幅を確保するので、作業面は動きません。パネルは作業面より上下24pxずつ短く、中身はパネルの中でスクロールします。

56rem未満では、パネルを作業面の下へstart、endの順に積み、見出しの行で開閉します。右から左へ書く言語では、左右の配置と開閉のアイコンの向きを反転します。

storageKeyを指定し、WingControllerをwingとして登録すると、左右の開閉状態をcookieへ保存します。cookieの名前はwingCookieName(storageKey)、有効期間は1年です。サーバーでこのcookieを読んでsavedStateへ渡すと、保存した状態のまま描画するので、読み込み時にちらつきません。savedStateを渡さない場合も、接続時にcookieから復元します。storageKeyはサイト内で一意にします。