Ajout d'un fichier CSS pour votre composant

Vous pouvez ajouter un fichier CSS fournissant un style par défaut pour votre composant.

1. Ajoutez un fichier design.css au dossier assets de votre composant, avec le contenu suivant :

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }

2. Ajoutez à appinfo.json les éléments nécessaires pour déclarer le préfixe de classe de style qui sera utilisé pour appliquer le style à votre composant. Si vous ajoutez styleClassName avec la valeur h1-component, h1-component-default-style sera le style par défaut du composant déplacé vers la page. Le nouveau contenu du fichier appinfo.json est le suivant :

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "styleClassName":"h1-component",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

3. Mettez à jour render.js pour charger votre fichier CSS en remplaçant la ligne 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) par la ligne suivante.

   define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

   Remarque :

   Etant donné que vous avez modifié le fichier appinfo.json, vous devez actualiser le navigateur et ajouter de nouveau votre composant à une page pour récupérer les modifications.