> For the complete documentation index, see [llms.txt](https://ds.photoruction.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds.photoruction.com/design-pattern/side-panel.md).

# サイドパネル

## 可変型サイドパネル

可変型のサイドパネル (データファインダー)では最小幅を300px、最大幅を480pxとする。\
ユーザーが操作可能な領域は12pxとする。

<figure><img src="https://2122813178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fntjp6OxZgF8lxZ7jLd4L%2Fuploads%2Fa0K11STCwpJ4M79rueAk%2F%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88.webp?alt=media&amp;token=1c5e717e-a6b5-4fb2-a086-d16f2e77ac42" alt=""><figcaption></figcaption></figure>

## データファインダー

* フォルダ階層が分かるように小階層にインデントを付ける。
* 親階層はアコーディオン形式で開閉できるようにする。
* データ数の表記は最大6桁を想定とし、仮に7桁以上になる場合はテキストの領域を狭め、データ数は隠さずすべて表示する。
* テキストが表示領域に収まらない場合、省略表示(...)にする (データの桁数が増えた場合は表示可能なテキスト数を減らす)

<div align="left" data-full-width="false"><figure><img src="https://2122813178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fntjp6OxZgF8lxZ7jLd4L%2Fuploads%2F4huTfZvpMl1BtC8NYksX%2F%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A1%E3%82%A4%E3%83%B3%E3%83%80%E3%83%BC.webp?alt=media&amp;token=fb3af9f7-2477-4914-9213-63211d67abf9" alt=""><figcaption></figcaption></figure></div>