Compartir por


Diseño de la aplicación de Microsoft Teams con componentes básicos de la interfaz de usuario de Fluent

Puede diseñar y compilar la aplicación de Teams desde cero con los siguientes componentes básicos de la interfaz de usuario de Fluent. Diseñados lo más plano posible, estos componentes pueden funcionar en diferentes casos de uso, temas y tamaños de pantalla.

En las ilustraciones de esta página se muestra cómo se ven los componentes en los temas predeterminados (claros) y oscuros de Teams.

Kit de UI de Microsoft Teams

En función de los componentes de Fluent UI React, el kit de interfaz de usuario de Microsoft Teams incluye componentes y patrones diseñados específicamente para compilar aplicaciones de Teams. En el kit de interfaz de usuario, puede capturar e insertar los componentes enumerados aquí directamente en el diseño y ver más ejemplos de cómo usar cada componente.

Alerta

En el ejemplo se muestra un componente de interfaz de usuario de alerta.

Botón

En el ejemplo se muestra un componente de interfaz de usuario de botón.

En el ejemplo se muestra un componente de interfaz de usuario de ruta de navegación.

Tarjeta

En el ejemplo se muestra un componente de interfaz de usuario de tarjeta.

En el ejemplo se muestra un componente de interfaz de usuario de carrusel.

Casilla

En el ejemplo se muestra un componente de interfaz de usuario de casilla.

Marca de entrenador

En el ejemplo se muestra un componente de interfaz de usuario de coachmark.

Menú contextual

En el ejemplo se muestra un componente de interfaz de usuario de menú contextual.

Cuadro de diálogo

En el ejemplo se muestra un componente de interfaz de usuario de cuadro de diálogo.

En el ejemplo se muestra un componente de interfaz de usuario desplegable.

Lista de grupos

En el ejemplo se muestra un componente de interfaz de usuario de lista de grupos.

En el ejemplo se muestra un componente de interfaz de usuario de hipervínculo.

Input

En el ejemplo se muestra un componente de interfaz de usuario de entrada.

Par de valores clave

En el ejemplo se muestra un componente de interfaz de usuario de par de valores clave.

Párrafo

En el ejemplo se muestra un componente de interfaz de usuario de párrafo.

Recogedor

En el ejemplo se muestra un componente de interfaz de usuario del selector.

Documento principal

En el ejemplo se muestra un componente de interfaz de usuario dinámica.

Indicador de progreso

En el ejemplo se muestra un componente de interfaz de usuario de indicador de progreso.

Radio

En el ejemplo se muestra un componente de interfaz de usuario de radio.

Barra de desplazamiento

En el ejemplo se muestra un componente de interfaz de usuario de barra de desplazamiento.

En el ejemplo se muestra un componente de interfaz de usuario del cuadro de búsqueda.

Panel lateral

En el ejemplo se muestra un componente de interfaz de usuario del panel lateral.

Etiqueta de estado

En el ejemplo se muestra un componente de interfaz de usuario de etiqueta de estado.

Notificaci?n del sistema

En el ejemplo se muestra un componente de interfaz de usuario del sistema.

Alternancia

Nota: En fluent UI, toggle es un tipo de casilla.

En el ejemplo se muestra un componente de la interfaz de usuario de alternancia.

Información sobre herramientas

En el ejemplo se muestra un componente de interfaz de usuario de información sobre herramientas.

Otros recursos

Obtenga ejemplos de código y detalles de implementación de algunos de los componentes enumerados aquí y en el Kit de interfaz de usuario de Microsoft Teams.