home/資料/外部仕様/サイドバー/

v7

関連ページ

用語集

keyvalue
サイドバー画面左端に常駐するナビゲーション操作を行うバーと、それに関連するコンテンツ全体を指すことにする
サイドバーナビサイドバーのうち、ナビゲーション操作を行うバーのみを限定して指すことにする
(サイドバー)アイテムサイドバーの各コンテンツの種類を表すアイコンかつそのコンテンツを表示するための操作ボタンの役割を受け持つ
(サイドバー)コンテンツサイドバーを操作して表示させるアイテムの実体・詳細
モードサイドバーの表示形式のこと、 Collapsed モード, ドックモード, ドロワーモードの3種類が存在する(※各モードの詳細は以下に記載)

モード

種類

  1. Collapsed モード
    • サイドバーナビのみが常に表示されている状態
    • サイドバーナビにカーソルをホバーすると、現在選択中アイテムのコンテンツがオーバーレイ(ドロップダウンのような感じで浮いて)で表示される
    • サイドバーナビと、表示中のオーバーレイコンテンツの上をホバーしている間は、オーバーレイのコンテンツ表示が継続するが、マウスが離れると表示が消える
    • オーバーレイ表示上のコンテンツ開閉ボタン or サイドバーナビ上のアイテムのアイコンをクリックすることでドックモードに移行できる
    • sidebar-collapsed-mode.gif
    • https://xd.adobe.com/view/26f3cef5-06c1-4ed2-9871-b86d5d00adce-73a0/screen/9134aefe-6303-40a3-9fd1-d8f7213bf82d/ external_link
  2. ドックモード
    • 画面上に常にサイドバーナビとコンテンツがドッキングして表示されている (※なのでドックモード)
    • つまりコンテンツが開いている状態で固定表示されるものをドックモードと呼ぶ
    • Collapsed モード時に、コンテンツ開閉ボタン or サイドバーナビのボタンをクリックすることでドックモードに移行できる
    • ドックモード(開状態)からは、サイドコンテンツ開閉ボタン or 現在選択中のサイドバーメニューのボタンをクリックすることで Collapsed モードに移行できる
    • sidebar-dock-mode.gif
    • https://xd.adobe.com/view/26f3cef5-06c1-4ed2-9871-b86d5d00adce-73a0/screen/021a66f1-696d-4630-abc1-e3aaf16047e2/ external_link
  3. ドロワーモード

画面幅と切り替え可能なモードの関係

  • lg と xl の間のブレイクポイントを境に、対応するモードが変わる
  • lg 以下
    • ドロワーモードのみ
  • xl 以上
    • Collapsed モード
    • ドックモード

初期状態

  • lg 以下
    • ドロワーモードのみ
  • xl 以上
    • View, Editor ともに
      • Collapsed モード

コンテンツの種類

  1. カスタムサイドバー
  2. 最近の変更
  3. お気に入り(ブックマーク)
  4. タグ

初期状態

  • 最近の変更

サイドバーの設定値

記憶方法

  • DB で管理
  • 以下の「設定値変更操作」を行ってから 1500ms 後に保存 API を叩く

変更操作

以下に列挙する

  • サイドバーの状態を変える
    • 幅
    • 開閉
  • コンテンツの選択を切り替える