詳細
パネルの内側のエッジをドラッグしてサイズを変えるか、ピントを合わせて矢印キーを使うと良いでしょう。エッジをダブルクリックするか、Enterキーを押すとデフォルトの幅に戻ります。
サイドパネル
ページの端から内容の上をスライドさせる SidePanel があり、ページに置くべきフォームや詳細を表示できます。ユーザーは内側の端にあるドラッグハンドルでサイズ変更し、ナビゲーションをリサイズし、ハンドルをダブルクリックしてリセットできます。デフォルトではページの右側、つまり終わりにドッキングします。左側にドッキングするには Position (position)を Start (start)に設定してください。グリッドボタンは、位置がサイドパネルにある場合、一つのレコードフォームを開きます。
サイズ変更
サイズ変更はデフォルトでオンになっています。 EnableResizing (ReactではenableResizing )を false に設定し、固定幅に設定します。 DefaultWidth、 MinWidth 、 MaxWidth は開始幅とユーザーが持てる距離を設定し、パネル幅はビューポートより大きくなりません。パネルのキーを WidthStorageKey に渡すと、ユーザーが放置した幅でページ読み込みを横断して再開します。電話ではパネルは幅全体を使い、ハンドルはありません。
ヘッダー、ボディ、フッター
Title そしてほとんどのパネルは FooterContent (title と footer )をカバーします。フッターがコンテンツ内の状態に依存している場合(フォームに変更があった場合にのみ「保存」ボタンが有効になる)、代わりにパネルを構成してください。Blazorでは TitleTemplate と FooterContent 、Reactでは SidePanelHeader、 SidePanelBody 、 SidePanelFooterはそれぞれ独自のコンテキストプロバイダー内に配置できます。
サイドパネル
パネルの両側を開いて内側の端をドラッグしてサイズ変更するか、エッジにフォーカスして矢印キーを使うか、ダブルクリックするかEnterキーを押してリセットします。幅を覚えているので閉じてページを読み込み、再度開いてください。
SidePanel クラス
パラメータ
名称 | 種類 | デフォルト | 概要 |
|---|---|---|---|
ChildContent | RenderFragment? | パネルの内容。 | |
DefaultWidth | int | 400 | ユーザーがリサイズする前とダブルクリックリセット時のpxの幅。デフォルトは400です。 |
EnableResizing | bool | True | true(デフォルト)時は、ページに向かうパネルの端にドラッグハンドルを付けます ユーザーがサイズ変更できます。ハンドルをダブルクリックするとSidePanel.DefaultWidthにリセットできます。 電話にはハンドルがなく、パネルが幅全体を覆っています。 |
FooterContent | RenderFragment? | パネルのフッター、通常はアクションボタンです。 | |
MaxWidth | int | 1200 | ユーザーがパネルを最大幅で作れるのはpx。デフォルトは1200;ビューポートより幅広くは決してありません。 |
MinWidth | int | 320 | ユーザーがパネルをできるだけ狭くできるのはpxで。デフォルトは320です。 |
Modal | bool | True | パネルがモーダルかどうか。デフォルトは true。 |
Open | bool | False | パネルが開いているかどうか。双方向バインブル。 |
Position | SidePanelPosition | End | パネルがドッキングするページの端。デフォルトは SidePanelPosition.Endです。 |
PreventDismissOnEscape | bool | False | Escapeキーを押すのがパネルを閉じる代わりに無視されるかどうか。 |
ShowDismiss | bool | True | タイトルバーに終了(X)ボタンを表示するかどうか。デフォルトは true。 |
Title | string? | タイトルはプレーンテキスト。設定 SidePanel.TitleTemplate は無視されます。 | |
TitleTemplate | RenderFragment? | タイトルの内容。 | |
WidthStorageKey | string? | localStorageキーはパネルの幅を記憶するため、ユーザーのサイズで再開されます そのままにしておきましょう。毎回 SidePanel.DefaultWidth から始めるために設定を解除してください。それぞれのタイプを パネルはそれぞれの幅を記憶するので、それぞれのキーが独立しています。 |
名称:
ChildContent種類:
RenderFragment?
概要:
パネルの内容。
名称:
DefaultWidth種類:
int
デフォルト:
400
概要:
ユーザーがリサイズする前とダブルクリックリセット時のpxの幅。デフォルトは400です。
名称:
EnableResizing種類:
bool
デフォルト:
True
概要:
true(デフォルト)時は、ページに向かうパネルの端にドラッグハンドルを付けます ユーザーがサイズ変更できます。ハンドルをダブルクリックするとSidePanel.DefaultWidthにリセットできます。 電話にはハンドルがなく、パネルが幅全体を覆っています。名称:
FooterContent種類:
RenderFragment?
概要:
パネルのフッター、通常はアクションボタンです。
名称:
MaxWidth種類:
int
デフォルト:
1200
概要:
ユーザーがパネルを最大幅で作れるのはpx。デフォルトは1200;ビューポートより幅広くは決してありません。
名称:
MinWidth種類:
int
デフォルト:
320
概要:
ユーザーがパネルをできるだけ狭くできるのはpxで。デフォルトは320です。
名称:
Modal種類:
bool
デフォルト:
True
概要:
パネルがモーダルかどうか。デフォルトは
true。名称:
Open種類:
bool
デフォルト:
False
概要:
パネルが開いているかどうか。双方向バインブル。
名称:
Position種類:
SidePanelPosition
デフォルト:
End
概要:
パネルがドッキングするページの端。デフォルトは
SidePanelPosition.Endです。名称:
PreventDismissOnEscape種類:
bool
デフォルト:
False
概要:
Escapeキーを押すのがパネルを閉じる代わりに無視されるかどうか。
名称:
ShowDismiss種類:
bool
デフォルト:
True
概要:
タイトルバーに終了(X)ボタンを表示するかどうか。デフォルトは
true。名称:
Title種類:
string?
概要:
タイトルはプレーンテキスト。設定
SidePanel.TitleTemplate は無視されます。名称:
TitleTemplate種類:
RenderFragment?
概要:
タイトルの内容。
名称:
WidthStorageKey種類:
string?
概要:
localStorageキーはパネルの幅を記憶するため、ユーザーのサイズで再開されます そのままにしておきましょう。毎回
SidePanel.DefaultWidth から始めるために設定を解除してください。それぞれのタイプを パネルはそれぞれの幅を記憶するので、それぞれのキーが独立しています。イベント
名称 | 種類 | 概要 |
|---|---|---|
OnDismiss | EventCallback | ユーザーがパネルを閉じるとき(Escapeまたは終了ボタンを押す)時に上がりますが、その時ではありません SidePanel.Open は親によって設定されます。 |
OpenChanged | EventCallback<bool> | ユーザーがパネルを閉じると false が上がります。 |
名称:
OnDismiss種類:
EventCallback
概要:
ユーザーがパネルを閉じるとき(Escapeまたは終了ボタンを押す)時に上がりますが、その時ではありません
SidePanel.Open は親によって設定されます。名称:
OpenChanged種類:
EventCallback<bool>
概要:
ユーザーがパネルを閉じると
false が上がります。