Startseite
NexoPOS

Themengestaltung

Dieser Leitfaden hilft dabei, Ihre Komponenten schnell zu entwerfen, um eine nahtlose Integration mit dem NexoPOS-Dashboard sicherzustellen. Diese Prinzipien wurden bereits mit Farben und Verläufen festgelegt, um das Prototyping von Komponenten zu erleichtern.

Du kannst TailwindCSS weiterhin zu deinem Modul hinzufügen und deinen eigenen Stil erstellen. Das lässt sich mit diesem Designprinzip kombinieren, falls diese neueste Version für dein Projekt gewisse Einschränkungen hat.

Variablen

Die Variablen sind die Farbwerte, die wir für verschiedene Zwecke festgelegt haben. Hier ist eine Liste von Komponenten, die eingefärbt sind. Die Werte sind für den Dark Mode festgelegt. Wenn du dein eigenes Theme erstellst, müssen diese Werte in deiner Datei „_variables.scss“ definiert werden.

Form:

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

Box:

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

Ziffernblock:

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

Bildlaufleiste:

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

Tabs:

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

Schwebendes Menü:

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

Typografie:

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

Box

Eine Box wird verwendet, um einen quadratischen Bereich zu erstellen, in dem Steuerelemente oder Text verwendet werden können. Diese Funktion wird hauptsächlich für das Login- und Registrierungsformular verwendet. Sie wird außerdem verwendet, um ein Popup zu erstellen.

Eine Box verwendet „ns-box“ als übergeordnete Klasse. Wenn Ihre Box einen Titel, einen Inhalt und einen Footer hat, verwenden Sie die folgende Klasse, um diese Bereiche zu stylen:

  • „ns-box-header“
  • body: „ns-box-body“
  • Fußzeile: „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>

CRUD-Tabelle

Die CRUD-Tabelle ist eine Komponente, die Einträge auflistet. Sie wird auf NexoPOS häufig verwendet, um Verkäufe, Kunden, Anbieter, Produkte und vieles mehr anzuzeigen.

Eine CRUD-Tabelle verfügt über verschiedene Unterkomponenten, die ihre eigenen Designprinzipien verwenden. Die folgenden Prinzipien gelten nur für die Tabelle selbst.

Derzeit gehen wir davon aus, dass pro Seite nur eine CRUD-Komponente angezeigt wird. Daher hat sie die ID „crud-table“. Wenn die CRUD-Tabelle im Header ein Eingabefeld hat, wendest du die Klasse „ns-crud-input“ darauf an. Jede Zeile muss die Klasse „ns-table-row“ haben. Wenn eine Zeile ein Optionsmenü hat, sollte dieses Menü in einen div-Container mit der Klasse „ns-menu-wrapper“ eingeschlossen werden und die Aktionsschaltfläche sollte die Klasse „ns-action-button“ haben.

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