Cœur de fabric dans les modules

  • Article

Fabric Core est une collection open source de classes CSS et de mixins Sass destinée à être utilisée dans des compléments Office non React. Fabric Core contient des éléments de base du langage de conception de l’interface utilisateur Fluent, tels que les icônes, les couleurs, les polices et les grilles. Fabric Core étant indépendant de l’infrastructure, il peut être utilisé avec n’importe quelle application monopage ou toute infrastructure d’interface utilisateur web côté serveur. (Il est appelé « Fabric Core » au lieu de « Fluent Core » pour des raisons historiques.)

Si l’interface utilisateur de votre complément n’est pas basée sur React, vous pouvez également utiliser un ensemble de composants non React. Voir Utiliser les composants JS d’Office UI Fabric.

Remarque

Cet article décrit l’utilisation de Fabric Core dans le contexte des compléments Office, mais il est également utilisé dans un large éventail d’applications et d’extensions Microsoft 365. Pour plus d’informations, consultez Fabric Core et le dépôt open source Office UI Fabric Core.

Remarque

Bien que Fabric Core soit la bibliothèque recommandée pour concevoir des compléments non React, l’équipe travaille sur les composants web Fluent UI pour fournir une solution plus récente. Basée sur FAST, la bibliothèque composants web Fluent UI vous permet d’utiliser, de personnaliser et de générer des composants web pour créer une interface utilisateur plus moderne et basée sur des normes. Nous vous invitons à tester cette bibliothèque en suivant le guide de démarrage rapide et les commentaires bienvenus sur votre expérience via GitHub.

Utiliser Fabric Core : icônes, polices, couleurs

  1. Ajoutez la référence de réseau de distribution de contenu (CDN) au code HTML sur votre page.

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

  2. Utilisez des icônes et des polices Fabric Core.

    Pour utiliser une icône Fabric Core, incluez l’élément « i » sur votre page, puis référencez les classes appropriées. Vous pouvez contrôler la taille de l’icône en modifiant la taille de police. Par exemple, le code suivant montre comment créer une icône de tableau extra large qui utilise la couleur themePrimary (#0078d7).

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

    Pour obtenir des instructions plus détaillées, consultez Icônes de l’interface utilisateur Fluent. Pour trouver d’autres icônes disponibles dans Fabric Core, utilisez la fonctionnalité de recherche sur cette page. Lorsque vous trouvez une icône à utiliser dans votre complément, veillez à précéder le nom de l’icône de ms-Icon--.

    Pour plus d’informations sur les tailles de police et les couleurs disponibles dans Fabric Core, consultez Typographie et la table des matières des couleurs sur Couleurs.

Des exemples sont inclus dans les exemples plus loin dans cet article.

Utiliser les composants JS d’Office UI Fabric

Les compléments avec des interfaces utilisateur non React peuvent également utiliser l’un des nombreux composants d’Office UI Fabric JS, notamment des boutons, des boîtes de dialogue, des sélecteurs, etc. Pour obtenir des instructions, consultez le fichier lisez-moi du référentiel.

Des exemples sont inclus dans les exemples plus loin dans cet article.

Échantillons

Les exemples de compléments suivants utilisent des composants JS Fabric Core et/ou Office UI Fabric. Certains de ces dépôts sont archivés, ce qui signifie qu’ils ne sont plus mis à jour avec des correctifs de bogue ou de sécurité, mais vous pouvez toujours les utiliser pour apprendre à utiliser les composants Fabric Core et Fabric UI.