Préparation de la page

Avant d'utiliser les composants, il faut intégrer quelques éléments dans la page.

La CSS

Il est nécessaires d'intégrer les deux SCSS suivantes :

• @anakeen/user-interfaces/components/scss/bootstrap.scss
• @anakeen/user-interfaces/components/scss/kendo.scss

Cela permet de construire la SCSS de base des composants kendo utilisés par nos interfaces.

Les traductions

Ensuite, il faut intégrer le module de traductions.

import setup from "@anakeen/user-interfaces/components/lib/setup.esm";

Vue.$_globalI18n.recordCatalog().then(() => {});

Exemple

Dans l'exemple ci-dessous, il est initialisé un composant d'identité.

import kendo from "@progress/kendo-ui/js/kendo.progressbar";
import $ from "jquery";
import setup from "@anakeen/user-interfaces/components/lib/setup.esm";
import ankIdentify from "@anakeen/user-interfaces/components/lib/AnkIdentity.esm";
import "@anakeen/user-interfaces/components/scss/bootstrap.scss";
import "@anakeen/user-interfaces/components/scss/kendo.scss";
import "@anakeen/user-interfaces/components/scss/AnkIdentity.scss";

import Vue from "vue";

const enableLoader = (enable = true, element = "body") => {
  kendo.ui.progress($(element), enable);
};

Vue.use(setup);

enableLoader();

Vue.component("ank-identity", ankIdentify);

Vue.$_globalI18n.recordCatalog().then(() => {
  new Vue({
    el: "#main",
    template: `<div><ank-identity :large="true" :email-alterable="true" :password-alterable="true" ></ank-identity></div>`,
    mounted() {
      enableLoader(false);
    }
  });
});