使用基本 Fluent UI 组件设计 Microsoft Teams 应用

  • 项目

可以使用以下基本 Fluent UI 组件从头开始设计和生成 Teams 应用。 这些组件设计得尽可能平面，可以跨不同的用例、主题和屏幕大小工作。

此页上的插图显示了组件在 Teams 默认 (浅色) 和深色主题中的外观。

Microsoft Teams UI Kit

Microsoft Teams UI 工具包基于 Fluent UI 响应组件，包括专为生成 Teams 应用而设计的组件和模式。 在 UI 工具包中，可以抓取此处列出的组件并将其直接插入到设计中，并查看有关如何使用每个组件的更多示例。

获取 Microsoft Teams UI 工具包 (Figma) 。

通知

示例显示了警报 UI 组件。

按钮

示例显示按钮 UI 组件。

示例显示了痕迹导航 UI 组件。

卡

示例显示卡 UI 组件。

示例显示轮播 UI 组件。

复选框

示例显示复选框 UI 组件。

Coachmark

示例显示 coachmark UI 组件。

上下文菜单

示例显示上下文菜单 UI 组件。

对话框

示例显示对话框 UI 组件。

示例显示下拉列表 UI 组件。

组列表

示例显示组列表 UI 组件。

示例显示超链接 UI 组件。

Input

示例显示输入 UI 组件。

键值对

示例显示键值对 UI 组件。

段落

示例显示段落 UI 组件。

选取器

示例显示选取器 UI 组件。

透视

示例显示了透视 UI 组件。

进度指示器

示例显示进度指示器 UI 组件。

无线电

示例显示单选 UI 组件。

滚动条

示例显示了滚动条 UI 组件。

示例显示搜索框 UI 组件。

侧面板

示例显示了侧面板 UI 组件。

状态标签

示例显示状态标签 UI 组件。

Toast

示例显示 Toast UI 组件。

切换

注意：在 Fluent UI 中，切换是一种复选框类型。

示例显示切换 UI 组件。

工具提示

示例显示工具提示 UI 组件。

其他资源

获取此处和 Microsoft Teams UI 工具包中列出的某些组件的代码示例和实现详细信息。

试用 Fluent UI 响应组件