Разработка приложения Microsoft Teams с базовыми компонентами пользовательского интерфейса Fluent

Вы можете создать приложение Teams с нуля с помощью следующих базовых компонентов пользовательского интерфейса Fluent. Разработанные как можно более плоские, эти компоненты могут работать в разных случаях использования, темах и размерах экрана.

На иллюстрациях на этой странице покажите, как выглядят компоненты в Teams (светлые) и темные темы.

Комплект разработчика для пользовательского интерфейса Microsoft Teams

На основе пользовательского интерфейса FluentMicrosoft Teams пользовательского интерфейса включает компоненты и шаблоны, разработанные специально для создания Teams приложений. В наборе пользовательского интерфейса можно захватить и вставить компоненты, перечисленные здесь непосредственно в дизайн, и увидеть дополнительные примеры использования каждого компонента.

Оповещение

В примере показан компонент пользовательского интерфейса оповещения.

Кнопка

В примере показан компонент пользовательского интерфейса кнопки.

В примере показан компонент пользовательского интерфейса breadcrumb.

Карточка

В примере показан компонент пользовательского интерфейса карты.

В примере показан компонент пользовательского интерфейса карусель.

Флажок

В примере показан компонент пользовательского интерфейса почтовых ящиков.

Coachmark

В примере показан компонент пользовательского интерфейса coachmark.

Контекстное меню

В примере показан компонент пользовательского интерфейса контекстного меню.

Dialog

В примере показан компонент пользовательского интерфейса диалогов.

В примере показан компонент пользовательского интерфейса с отсевом.

Групповой список

В примере показан компонент пользовательского интерфейса группового списка.

В примере показан компонент пользовательского интерфейса гиперссылки.

Input

В примере показан компонент пользовательского интерфейса ввода.

Пара ключевых значений

В примере показан компонент пользовательского интерфейса пары ключевых значений.

Paragraph

В примере показан компонент пользовательского интерфейса абзаца.

Выборщик

В примере показан компонент пользовательского интерфейса выборщика.

Pivot

В примере показан компонент пользовательского интерфейса поворота.

Индикатор прогресса

В примере показан компонент пользовательского интерфейса индикатора прогресса.

Радио

В примере показан компонент пользовательского интерфейса радиосвязи.

Прокрутка

В примере показан компонент пользовательского интерфейса прокрутки.

В примере показан компонент пользовательского интерфейса поле поиска.

Боковая панель

В примере показан компонент пользовательского интерфейса боковой панели.

Метка status

В примере показан компонент пользовательского интерфейса метки состояния.

Всплывающее уведомление

В примере показан компонент пользовательского интерфейса toast.

Toggle

Примечание. В пользовательском интерфейсе Fluent перетаском является типом флажка.

В примере показан компонент пользовательского интерфейса toggle.

Подсказка

В примере показан компонент пользовательского интерфейса tooltip.

Другие ресурсы

Получите примеры кода и сведения о реализации некоторых компонентов, перечисленных здесь и в Microsoft Teams пользовательского интерфейса.