рекомендации по проектированию компонентов Loop
Microsoft Loop компоненты являются динамическими, практическими единицами производительности, которые синхронизируются и свободно перемещаются между приложениями Microsoft 365. Они позволяют пользователям делиться содержимым в реальном времени и совместно работать с другими пользователями в чатах и собраниях Microsoft Teams, электронной почте Microsoft Outlook, microsoft Whiteboard или Loop приложении. Компоненты Loop можно создать, обновив существующую адаптивную карточку в компонент Loop или создав новый компонент Loop на основе адаптивных карточек.
Loop компоненты были впервые выпущены в Teams, а затем другие приложения Microsoft 365, такие как Outlook, Whiteboard и приложение Loop. Дополнительные сведения см. в статье Обзор компонентов Loop в экосистеме Microsoft 365.
основные функции компонента Loop
В следующей таблице перечислены основные функции компонента Loop.
| Функция | Описание |
|---|---|
| Жить | Последние сведения заполняются в карта. При наличии нескольких экземпляров они остаются синхронизированными по мере внесения обновлений. |
| Embedded | Карточки можно помещать в документы и беседы, которые отделены от остального содержимого. |
| Действия | Задачи можно выполнять в встроенном коде. |
| Портативный | Компоненты могут работать в приложении Microsoft 365, которое поддерживает Loop компоненты. |
Live. Адаптивная карточка должна обновляться самостоятельно при загрузке карта, например при открытии сообщения электронной почты или чата, чтобы отразить последнюю информацию.
Внедренные. Адаптивные карточки внедрены, поэтому от вас ничего конкретного не требуется.
Возможное действие: Loop компоненты позволяют пользователю выполнять действия по завершению потока внутри самого компонента, помимо простого просмотра информации или открытия браузера. Если адаптивная карточка является интерфейсом только для просмотра, найдите возможности, чтобы сделать ее практической, так как это основной карта элемент, чтобы порадовать пользователей. Убедитесь, что адаптивная карточка с интерфейсом только для просмотра не изменяется на компонент Loop. В этом случае она должна оставаться только адаптивной карточкой.
Примечание.
Некоторые разрешения пользователя или режимы компонента могут быть недоступны, но распространенные случаи должны быть практическими.
Вы можете сделать адаптивную карточку применимой, включив в нее любое из следующих действий:
- Утверждение отчета о расходах
- Добавить комментарий
- Обновление даты
- Обновление цены, например сумма в долларах
- Изменение назначения или значения состояния
- Добавление или обновление данных
Переносимая. Добавление атрибута URL-адреса в соответствии с требованиями в руководстве разработчика гарантирует, что компонент можно копировать в реальном времени в любом месте, где поддерживается компонент Loop адаптивной карточки.
элементы компонента Loop
Компонент Loop адаптивной карточки состоит из текста, заголовка и границы.
| элемент компонента Loop | Предоставляется разработчиком | Платформа предоставляет |
|---|---|---|
| Основной текст | Содержимое, полностью контролируемое вами | Отрисовка и стилизация элементов управления на основе кода. |
| Header | Значок и имя | Элементы и макет являются стандартными и предоставляются платформой. |
| Border | Н/Д | Стандартная граница для всех компонентов Loop. |
Loop текст компонента
Текст компонента Loop делает компонент уникальным. Вы можете предоставить пользователям положительный опыт и увеличить использование и хранение, создав компонент, который воплощает атрибуты компонента Loop и обеспечивает ценность для клиентов.
Конкретные потребности и сценарии ваших пользователей определяют основной текст компонента.
Ниже приведены рекомендации по Loop тексту компонента.
- Основные сведения об основах и основных принципах проектирования адаптивных карточек см. в статье Обзор адаптивных карточек.
- Следуйте рекомендациям по проектированию адаптивных карточек, которые включают инструменты, примеры, заметки о адаптивном дизайне и плотности пикселей.
- В следующем списке приведены Loop аспекты, связанные с компонентами.
- Убедитесь, что компонент соответствует атрибутам Loop компонентов, таким как динамический, интерактивный, внедренный и переносимый.
- Не добавляйте отдельную кнопку для открытия в браузере.
- Не добавляйте повторяющийся заголовок или границу.
Не добавляйте отдельную кнопку для открытия в браузере
Заголовок компонента Loop предоставляет стандартный способ открытия браузерного представления компонента на основе вашего URL-адреса. Таким образом, нет необходимости добавлять отдельную кнопку в компонент для таких действий, как Просмотр сведений или Открытие в Интернете.
Вы можете добавить кнопки или ссылки для более конкретных представлений, например Для просмотра связанных элементов. По возможности предоставьте необходимые сведения и взаимодействие в карта.
Не добавляйте повторяющийся заголовок или границу
Все Loop компоненты имеют стандартный заголовок и границу. Убедитесь, что код адаптивной карточки не дублирует заголовок и границу. У вас может быть заголовок элемента для компонента, но убедитесь, что имя приложения и значок не совпадают.
заголовок компонента Loop
Платформа предоставляет заголовок компонента, который включает стандартные элементы, такие как логотип приложения, имя приложения и кнопка Копировать компонент
.
| Счетчик | Описание |
|---|---|
| 1 | Логотип приложения: полноцветный логотип приложения |
| 2 | Имя приложения: полное имя приложения |
| 3 | Кнопка "Копировать компонент"
|
Имя приложения определяется в манифесте приложения. Рекомендуется использовать краткое имя приложения.
Логотип приложения определяется в манифесте приложения. Убедитесь, что предоставленный логотип работает как на светлом, так и на темном фоне, так как один и тот же ресурс используется для светлых, темных и высококонтрастных тем в Teams.
Loop границы компонента
Граница компонента отделяет компонент от содержимого вокруг него. Это помогает пользователям понять, что компонент Loop является динамическим и отделен от окружающего его содержимого, например электронной почты или чата.
Граница отображается автоматически.
Следующее действие
См. также
Platform Docs