Tema

Questa guida ti aiuta a progettare rapidamente i tuoi componenti per garantire un’integrazione fluida con la dashboard NexoPOS. Questi principi sono già stati impostati con colori e gradienti per facilitare la prototipazione dei componenti.

Puoi comunque aggiungere TailwindCSS al tuo modulo e creare il tuo stile. Questo può essere combinato con questo principio di progettazione nel caso in cui quest’ultimo presenti alcune limitazioni per il tuo progetto.

Variabili

Le variabili sono il valore del colore che abbiamo impostato per vari scopi. Ecco un elenco di componenti che vengono colorati. I valori sono impostati per la Modalità Scura. Se crei il tuo tema, questi valori devono essere definiti nel tuo file "_variables.scss".

Modulo:

--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;

Scatola:

--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;

Tastierino numerico:

--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;

Barra di scorrimento:

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

Schede:

--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 flottante :

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

Tipografia:

--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;

Scatola

Un riquadro viene utilizzato per creare una sezione quadrata in cui inserire controlli o testo. Questa funzionalità viene utilizzata principalmente per i moduli di accesso e registrazione. Viene anche utilizzata per creare una finestra popup.

Una box usa “ns-box” come classe padre. Se la tua box ha un titolo, un corpo e un footer, utilizzerai la seguente classe per dare stile a queste aree:

• "ns-box-header"
• corpo: "ns-box-body"
• piè di pagina: "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>

Tabella CRUD

La tabella CRUD è un componente che elenca le voci. È ampiamente utilizzata su NexoPOS per mostrare vendite, clienti, fornitori, prodotti e molto altro.

Una tabella CRUD presenta vari sottocomponenti che utilizzano i propri principi di progettazione. I seguenti principi si applicano solo alla tabella stessa.

Al momento, riteniamo che venga visualizzato un solo componente crud per pagina. Pertanto, avrà l’ID “crud-table”; se la tabella crud ha un input nell’intestazione, applicherai ad essa la classe “ns-crud-input”. Ogni riga deve avere la classe “ns-table-row”. Se una riga ha un menu delle opzioni, quel menu deve essere racchiuso in un div con la classe “ns-menu-wrapper” e il pulsante di azione deve avere 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>