Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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 bzg. Erstellung der nötigen Files). Diese müssen im projektspezifischen App.tsx 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

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

  • No labels