Accueil
NexoPOS

Thématisation

Ce guide vous aide à concevoir rapidement vos composants afin d’assurer une intégration transparente avec le tableau de bord NexoPOS. Ces principes ont déjà été définis avec des couleurs et des dégradés pour faciliter le prototypage des composants.

Vous pouvez toujours ajouter TailwindCSS à votre module et créer votre propre style. Cela peut être combiné avec ce principe de conception au cas où cette dernière approche présenterait certaines limites pour votre projet.

Variables

Les variables correspondent à la valeur de couleur que nous avons définie à diverses fins. Voici une liste des composants qui sont colorés. Les valeurs sont définies pour le mode sombre. Si vous créez votre propre thème, ces valeurs doivent être définies dans votre fichier « _variables.scss ».

Formulaire :

--input-edge: 30 41 59;
--input-background: 51 65 85;
--input-disabled: 30 41 59;
--input-button: 71 85 105;
--input-button-hover: 59 130 246;
--input-button-active: 59 130 246;
--input-option-hover: 100 116 139;

Boîte :

--box-background: 51 65 85;
--box-edge: 71 85 105;
--box-elevation-background: 71 85 105;
--box-elevation-edge: 100 116 139;
--box-elevation-hover: 100 116 139;

Crud : -

-crud-button-edge: 30 41 59;
--pos-button-edge: 30 41 59;

Clavier numérique :

--numpad-background: 71 85 105;
--numpad-typography: 250 250 250;
--numpad-edge: 71 85 105;
--numpad-hover: 71 85 105;
--numpad-hover-edge: 71 85 105;

Barre de défilement :

--scroll-thumb: 51 65 85;
--scroll-track: 0 0 0;
--scroll-popup-thumb: 71 85 105;

Onglets :

--tab-active: 51 65 85;
--tab-active-border: 30 41 59;
--tab-inactive: 30 41 59;
--tab-table-th: 100 116 139;
--tab-table-th-edge: 100 116 139;
--table-th: 51 65 85;
--table-th-edge: 71 85 105;

Menu flottant :

--option-hover: 100 116 139;
--floating-menu: 71 85 105;
--floating-menu-hover: 100 116 139;
--floating-menu-edge: 51 65 85;

Typographie :

--pre: 30 41 59;
--typography: 255 255 255;
--surface: 15 23 42;
--popup-surface: 51 65 85;
--primary: 226 232 240;
--secondary: 203 213 225;
--tertiary: 148 163 184;
--info-primary: 96 165 250;
--info-secondary: 59 130 246;
--info-tertiary: 37 99 235;
--info-light-primary: 191 219 254;
--info-light-secondary: 147 197 253;
--info-light-tertiary: 96 165 250;
--error-primary: 248 113 113;
--error-secondary: 239 68 68;
--error-tertiary: 220 38 38;
--error-light-primary: 254 202 202;
--error-light-secondary: 252 165 165;
--error-light-tertiary: 248 113 113;
--success-primary: 34 197 94;
--success-secondary: 22 163 74;
--success-tertiary: 21 128 61;
--success-light-primary: 187 247 208;
--success-light-secondary: 134 239 172
--success-light-tertiary: 74 222 128;
--warning-primary: 251 146 60;
--warning-secondary: 249 115 22;
--warning-tertiary: 234 88 12;
--warning-light-primary: 255 237 213;
--warning-light-secondary: 254 215 170
--warning-light-tertiary: 253 186 116;
--danger-primary: 202 138 4;
--danger-secondary: 161 98 7;
--danger-tertiary: 133 77 14;
--danger-light-primary: 254 249 195;
--danger-light-secondary: 254 240 138;
--danger-light-tertiary: 253 224 71;
--default-primary: 203 213 225;
--default-secondary: 148 163 184;
--default-tertiary: 100 116 139;
--default-light-primary: 226 232 240;
--default-light-secondary: 203 213 225
--default-light-tertiary: 148 163 184;

Boîte

Une boîte est utilisée pour créer une section carrée dans laquelle des contrôles ou du texte peuvent être utilisés. Cette fonctionnalité est principalement utilisée pour les formulaires de connexion et d’inscription. Elle sert également à créer une fenêtre contextuelle.

Une boîte utilise « ns-box » comme classe parent. Si votre boîte a un titre, un corps et un pied de page, vous utiliserez la classe suivante pour styliser ces zones :

  • en-tête : "ns-box-header"
  • corps : « ns-box-body »
  • pied de page : « ns-box-footer »
<div class="ns-box">
  <div class="ns-box-header">Box Header</div>
  <div class="ns-box-body">
    <!-- Your content here -->
  </div>
  <div class="ns-box-footer"></div>
</div>

Table CRUD

Le tableau CRUD est un composant qui liste des entrées. Il est largement utilisé sur NexoPOS pour afficher les ventes, les clients, les fournisseurs, les produits et bien plus encore.

Une table CRUD comporte divers sous-composants qui utilisent leurs propres principes de conception. Les principes suivants ne s’appliquent qu’à la table elle-même.

À l’heure actuelle, nous pensons qu’un seul composant crud est affiché par page. Par conséquent, il a l’identifiant « crud-table ». Si la table crud comporte une entrée dans l’en-tête, vous appliquerez la classe « ns-crud-input ». Chaque ligne doit avoir la classe « ns-table-row ». Si une ligne comporte un menu d’options, ce menu doit être encapsulé dans un div ayant la classe « ns-menu-wrapper » et le bouton d’action doit avoir la classe « ns-action-button ».

<div id="crud-table">
    <!-- any elements that organize the layout -->
      <div class="ns-crud-input">
          <input type="text">
          <button class="ns-crud-input-button">Click</button>
      </div>
      <button class="ns-crud-button">Button</button
    <!-- any elements that organize the layout -->
</div>