Attention: article en work-in-progress! Testé fonctionnel UIKit v3.6.18.

Nous allons ajouter un composant Drilldown. Ce billet vous donnera seulement un boilerplate. Pas le composant complet.

Quelques petites choses à savoir avant de démarrer:

  • Un développement custom sous UIKit doit obligatoirement partir de la branche develop si vous souhaitez soumettre par la suite votre composant pour ajout au framework. Sinon, vous pouvez partir du dernier tag en date.
  • LESS est la langage de style principal pour développer sous UIKit et les fichiers générés dans le dossier dist/css/*.css le sont à partir des sources LESS. La commande npm run build-scss ne fait que générer une version au format SCSS des sources LESS! Vous pouvez tout-à-fait partir des sources SCSS pour vos développements custom, mais il vous faudra fournir vous-même le moyen de les compiler (via Gulp, Webpack ou autre) et votre composant ne pourra pas être ajouté au framework. Corrigez-moi si je dis des bêtises.

Les fichiers de style à créer/à modifier

Créer src/less/components/drilldown.less

Modifier src/less/components/_import.less

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript:

Créer src/less/theme/drilldown.less

Modifier src/less/theme/_import.less

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript (même manip’ que pour la partie components:

Commande pour compiler les fichiers source au format LESS:

yarn compile-less (les icônes sont également compilées via cette commande).