> 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="/files/2LHzSEwCTeYSE7PiQyJZ" alt=""><figcaption></figcaption></figure>

## データファインダー

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

<div align="left" data-full-width="false"><figure><img src="/files/Awm3FxwVezOnux0G0F6i" alt=""><figcaption></figcaption></figure></div>