Sider

powerx_yc發表於2018-04-13
IDE
2981331-72fb2727c2cd7fda.png
Sider.png
  • Sider 具有展開/收起狀態 ( Collapse State )

1. SiderTitle

2981331-ff917d194dfa4091.png
SiderTitle.png

2981331-6a4723e8335dda5e.png
SiderTitle-Collapsed.png
  • 展開時展示 system icon + system name
  • 收起時只展示 system icon
  • 由下方的 Collapse Button 控制狀態，Button上的 text 為 "<" 和 ">"
  • 預設為展開狀態，且狀態不做持久化，即初次進入和重新整理頁面後，Sider 都會處於展開狀態
  • 展開狀態 Sider 寬度 200px ，收起狀態 Sider 寬度 80px
  • system name 的字型為 12px ，設計時對 system name 和 icon 應考慮寬度，不得超出標準
  • 點選 Title ，應當導航到首頁，即“/” ，展示歡迎頁 ( Welcome )

2. SiderMenu

2981331-1d2d4c44769a5995.png
SiderMenu.png

2981331-7ec584e7c1c0392f.png
SiderMenu-Collapsed.png
  • 如上圖所示，"Demo" 和 "test-nav-1" 為一級導航項 ( Main-Menu-Item ) ，"Todo-List" 和 "Template" 為二級導航項 ( Sub-Menu-Item )
  • 要新建一個業務模組 ( Module )，即新建一個 Sub，然後放在正確的 Main 中
  • 依照這個標準，Main 僅作為分類標籤使用，只有 Sub 具有路由導航功能
  • 每個Main 應當設定 icon + name + collapse arrow ，在 Sider 處於展開狀態時全部展示，處於收起狀態時僅展示 icon
  • 僅存在Sub時，應當給 Sub 設定 icon + name，在 Sider 處於收起狀態時僅展示 icon
  • 在 Sider 處於展開狀態時，click Main 會觸發其本身的 toggle 操作，屬於這個 Main 的Sub 會展開在 Main 的下方，再次點選會收起這些 Sub；展開一個 Main 時，如果其他的 Main 處於展開狀態時，會自動收起，即保證一次只能有一個 Main 展開
  • 在 Sider 處於收起狀態時，hover Main 會觸發其本身的 toggle 操作，屬於這個 Main 的Sub 會懸浮在 Main 的右側
  • 點選一個Sub，會使其進入啟用狀態，並改變至對應的路由
  • Menu 會撐滿除了 Title 和 Button 之外的空間，如果 Menu 中的元素過長，會出現豎向滾動條；但是這種情況應當在原型設計中避免，如果一個 Main 包含的 Sub 過多，應當分離成多個 Main
  • Menu 每次載入時，會根據路由啟用對應的 Sub ，並展開其對應的 Main

相關文章