Compartir a través de

Núcleo de componentes en los complementos de Office

  • Artículo

Fabric Core es una colección de código abierto de clases CSS y mixins sass destinada a su uso en complementos de Office que no son React. Fabric Core contiene elementos básicos del lenguaje de diseño de la interfaz de usuario de Fluent, como iconos, colores, tipos de letra y cuadrículas. Fabric Core es independiente del marco, por lo que se puede usar con cualquier aplicación de página única o con cualquier marco de interfaz de usuario web del lado servidor. (Se llama "Fabric Core" en lugar de "Fluent Core" por motivos históricos).

Si la interfaz de usuario del complemento no está basada en React, también puede usar un conjunto de componentes que no son React. Consulte Uso de componentes de Office UI Fabric JS.

Nota:

En este artículo se describe el uso de Fabric Core en el contexto de los complementos de Office, pero también se usa en una amplia gama de aplicaciones y extensiones de Microsoft 365. Para obtener más información, vea Fabric Core y el repositorio de código abierto Office UI Fabric Core.

Nota:

Aunque Fabric Core es la biblioteca recomendada para diseñar complementos que no son React, el equipo está trabajando en Fluent UI Web Components para proporcionar una solución más reciente. Basada en FAST, la biblioteca Fluent UI Web Components le permite usar, personalizar y compilar componentes web para crear una interfaz de usuario más moderna y basada en estándares. Le invitamos a probar esta biblioteca completando los comentarios de inicio rápido y bienvenida sobre su experiencia a través de GitHub.

Usar Fabric Core: iconos, fuentes, colores

  1. Agregue la referencia de la red de entrega de contenido (CDN) al CÓDIGO HTML de la página.

    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.0.0/css/fabric.min.css">

  2. Use iconos y fuentes de Fabric Core.

    Para usar un icono de Fabric Core, incluya el elemento "i" en la página y, a continuación, haga referencia a las clases adecuadas. Puede controlar el tamaño del icono cambiando el tamaño de fuente. Por ejemplo, en el código siguiente, se muestra cómo crear un icono de tabla muy grande que use el color themePrimary (#0078d7).

    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

    Para obtener instrucciones más detalladas, consulte Iconos de interfaz de usuario de Fluent. Para encontrar más iconos disponibles en Fabric Core, use la característica de búsqueda en esa página. Cuando encuentre un icono para usar en su complemento, asegúrese de agregar ms-Icon-- al nombre como prefijo.

    Para obtener información sobre los tamaños de fuente y los colores que están disponibles en Fabric Core, vea Tipografía y la tabla colores de contenido en Colores.

Los ejemplos se incluyen en los ejemplos más adelante en este artículo.

Uso de componentes de Office UI Fabric JS

Los complementos con interfaces de usuario que no son React también pueden usar cualquiera de los muchos componentes de Office UI Fabric JS, incluidos botones, cuadros de diálogo, selectores y mucho más. Consulte el léame del repositorio para obtener instrucciones.

Los ejemplos se incluyen en los ejemplos más adelante en este artículo.

Muestras

En los siguientes complementos de ejemplo se usan componentes de Fabric Core o De Office UI Fabric JS. Algunos de estos repositorios se archivan, lo que significa que ya no se actualizan con correcciones de errores o de seguridad, pero todavía puede usarlos para aprender a usar componentes de fabric core y interfaz de usuario de Fabric.