UIKit – Une collection de composants graphique en JavaScript

 Article modifié dernièrement le 21 Fév 2016 @ 0 h 06 min

J’étais tombé dessus il y a quelques temps déjà lorsque je cherchais un moyen de créer un effet « flip » d’une carte (envers <-> endroit) pour mon site magicsupremacy.

Basé sur jQuery, UIKit propose une collection de composants graphique  intéressants et très minimalistes, ce qui m’a tout de suite plu car très facilement « customisable » au niveau visuel (CSS) sur n’importe quel site web.

Le composant qui m’a fait donc découvrir UIKit est ui.Card qui permet de visualiser un recto-verso d’une carte en utilisant les transformations 3D avec CSS3 (-webkit-transform-style: preserve-3d).

 Composants

  • ui.Emitter an event emitter used throughout various components
  • ui.Card a double-sided « card » powered by 3d transforms
  • ui.ColorPicker an elegant scalable color picker
  • ui.Overlay an overlay used by ui.Dialog
  • ui.Dialog a dialog component sporting optional modal and overlay functionality
  • ui.Confirmation a confirmation dialog building on ui.Dialog
  • ui.Notification an unobtrusive growl-like notification
  • ui.Menu a simple menu component
  • ui.SplitButton emits three events, « click » when the button itself is clicked, « show » and « hide » for when the contents display is toggled

Démo

Pour mieux se rendre compte de la rapidité et de la simplicité des composants proposés, voici une page de démo qui permet de se faire une bonne idée du produit. Chaque composant graphique est expliqué ainsi que le code à mettre en place pour obtenir tel ou tel comportement sur celui-ci.

Les deux composants qui ont attiré mon attention dès le départ, sans parler du composant ui.Card, sont ui.Notification et ui.Menu. Simples et efficaces, à vous de juger.

 

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 28 octobre 2012, 22 10

    Thx pour l’article ; j’ai rajouté un logo sur la page d’accueil. +

Article suivant:

Article précédent:

Share This