Styling

Grundsätze

Komponenten basieren grundsätzlich auf DevExtreme-Komponenten. Das Styling basiert auf dem DevEx Theme “Generic - light”. Styling-Anpassungen auf Bloqs-Seite werden auf das notwendige Minimum beschränkt, um bei DevEx-Updates den Anpassungsaufwand möglichst gering zu halten.

Styling wird wie folgt angewendet:

DevEx Styles
Bloqs Styles
Projekt-Styles

Einbindung im Projekt

Basis Theme

Jedes Projekt muss ein oder mehrere Themes zur Verfügung stellen (siehe Theming bzgl. Erstellung der nötigen Files). Diese Themes müssen im projektspezifischen App.tsx in mainAppSetup (und ggf. auch im publicAppSetup) des QuinoApplicationRoot wie in folgendem Beispiel registriert werden:

 app
  .registerStartupAction(Symbol.for('RegisterThemes'), (app) => {
    const customizationService = app.get<IThemeCustomizationService>(IThemeCustomizationServiceSymbol);
    customizationService.registerTheme('sandbox', 'assets/dx.generic.sandbox-2412.css', 'assets/dx.generic.sandbox.json', true);
  })
  .moveTo(InitializationGroup);

Dabei können pro Theme folgende Parameter angegeben werden:

Theme-Name
Pfad zum css
Pfad zum json
Ob das betreffende Theme als Default verwendet werden soll

Ein Default-Theme muss gesetzt sein, damit die Applikation initial richtig angezeigt wird.

Wenn mehrere Themes registriert sind, kann in der Applikation in der UI-Configuration public:UiConfiguration:customization:themeName festgelegt werden, welches Theme verwendet werden soll. Wird dies nicht angegeben, wird das Default-Theme oder das erste registrierte Theme verwendet.

Um Caching-Probleme bei Versions-Updates zu vermeiden, wird empfohlen, bei CSS-Files die jeweilige DevEx-Version in den Dateinamen zu integrieren und bei jedem DevEx-Update anzupassen, also z.B. “dx.generic.sandbox-2412.css”.

Einbinden der Bloqs- und Projekt-Styles

Projektspezifische Files können in einem eigenen .less-File definiert werden. Um Bloqs-Styles zu importieren (und bspw. die darin enthaltenen Variablen verwenden zu können, muss folgender Import im projektspezifischen .less-File enthalten sein: @import "@quino/ecui/dist/ui/quino.styles";.

Das .less-File selbst muss wiederum im index.tsx importiert werden, z.b. import './your-project-style.less';.

Theming

TODO

Siehe https://dev.azure.com/encodo/Quino/_wiki/wikis/Quino Web Developer Documentation/1565/Theming