侧边栏 (Sidebars)

主侧边栏和次侧边栏由一个或多个由视图容器贡献的视图组成。扩展可以向现有的视图容器(例如,资源管理器)贡献视图,或者贡献一个全新的视图容器。

✔️ 应该做

  • 将相关的视图和内容组合在一起
  • 为视图容器及其视图使用清晰、具描述性的名称

❌ 不应该做

  • 使用过多的视图容器。对于大多数扩展来说,单个视图容器(例如带有该扩展专属视图的侧边栏)通常就足够了。
  • 使用过多的视图(对于大多数屏幕尺寸,3-5 个是一个舒适的上限)
  • 在侧边栏中添加本可以作为简单命令的内容。
  • 重复现有的功能

Example of two sidebars

主侧边栏

鉴于主侧边栏对内容具有极高的可见度,许多扩展选择向其贡献视图和/或视图容器。在此处添加内容时请做出良好的判断——贡献过多 UI 可能会导致界面杂乱,从而让用户感到困惑。

Example of the primary sidebar

次侧边栏

顾名思义,次侧边栏通常被认为是视图的辅助位置。虽然默认情况下扩展不能直接向其贡献视图,但用户可以将视图从主侧边栏或面板拖动到其中以自定义其布局。

Example of the secondary sidebar

默认情况下,侧边栏中包含多个视图的视图容器将在侧边栏工具栏中包含单个 ... 图标按钮,用于显示和隐藏各个视图。看起来大致如下

Sidebar with two views

然而,如果只使用一个视图,侧边栏将自动合并 UI,使用侧边栏工具栏来渲染该视图特有的所有操作。原本的 ... 按钮的位置将被与“Notes”视图相关的两个操作所取代

Sidebar with a single view and toolbar with actions

与其他工具栏一样,请注意不要添加过多操作,以减少杂乱和混淆。如果可能,请使用现有的产品图标并搭配具有描述性的命令名称。

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.