Partial-Library Light Mode (Default)

Horizontale Tabs

Die Items der Komponente .nav-tabs-line sind per default gestyled als inaktive .nav-item. Das aktive Item hat daher die zusätzlichen Klasse .active. Disabled Items, welche nicht angewählt werden können, haben die zusätzliche Klasse .disabled. Im Fall des UHR hat das aktive Item die Klasse .h2, da dieses den Titel der Unterseite bildet.

Buttons

Actionbuttons Header / Less-Space-List / Icon-Buttons links/rechts

Small Buttons

Link Buttons

Filter-Tabs / Btn-Group

in der .component-list kann die zusätzliche Klasse .less-space eingefügt werden (wie hier), damit die Abstände nur 7.5px zwischen den Buttons beträgt. Regulär 15px
Um Icon Links und Text rechtsbündig anzuorden (bzw. umgekehrt), die folgende Klasse einfügen.justify-content-between

Bemerkung Secondary-Button: In der Library wird der Secondary als .btn-outline-primary gecodet. Weil das unlogisch praktikabel ist, wird empfohlen, stattdessen .btn-secondary einzusetzen. Im Stylesheet wurde dies entsprechend vorbereitet.

Tiles / Icontiles

in der .component-list kann die zusätzliche Klasse .less-space eingefügt werden (wie hier), damit die Abstände nur 7.5px zwischen den Buttons beträgt. Regulär 15px

LEER

Erklärunggstext...

Switch-Toggler

txt

Formular Input Fields & Validation

Der Span mit der Description .og-input-description-above soll jederzeit im Markup ausgegeben werden. An Stellen, wo er nicht angezeigt werden soll, kann er mit .sr-only versteckt werden, sodass er für Screenreader immer noch verfügbar ist (Barrierefreiheit).

Formular Select Fields

txt

Formular Datepicker

Der Datepicker an sich ist noch nicht vorbereitet, da das wahrscheinlich in Blazor direkt besser funktioniert!? Im Fabrx-Theme wurde der folgende Datepicker verwendet: https://flatpickr.js.org/

Textarea

im unteren Kommentarfeld ist der span zur Beschreibung oberhalb ausgeblendet mit .sr-only (Barrierefreiheit, Screenreader)

Checkbox

Radiobutton

--- Komponenten

Accordion

Accordion Variante 1: Bootstrap Default Accordion:

Default: .accordion

Accordion Variante 2: OG functional Accordion:

Diese Version des Akkordeons mit der zusätzlichen CSS-Klasse .accordion.og-functional-accordion wird nur strukturell verwendet. Die Bootstrap Accordion-Styles (Rahmen und Abstände) wurden entfernt, sodass nur die Collapse/Expand-Funktion genutzt werden kann

Modal

Erklärunggstext...

Progress (APK)

Spezifisch für OG entwickelt (nicht aus der Library)

DevExpress Scheduler

Quelle: DevExpress Scheduler, Month View

• Markup wurde von Devexpress kopiert, um die Styles zu simulieren. In der Umsetzungssolution wird Markup generiert, nicht hardcoded. Sämtliche og-spezifischen Styles wurden mit dem CSS-Klassen-Prefix .og-sdl-" hinzugefügt.
• Da einige Styles im Scheduler dynamisch geladen wurden (z.B. bei den Termin-Kacheln die Höhe, Breite und position (absolut positioniert), wurden diese Styles im .og-prototype.scss überschrieben, damit die Kacheln in der Component Library angemessen angezeigt werden (und auch out of context funktionieren)
• die divs mit der klasse .og-prototype-item muss (soll!) nicht in die solution übernommen werden, dies dient lediglich der darstellung innerhalb der component library
• Die Kacheln beinhalten per Default in DevExpress die Farb-Klasse: .dxsc-apt-bg.dxbs-scheduler-blue-color. Diese definiert die Farbe. Wird hier überschrieben durch die Kachel-Types z.b..og-sdl-type-written

Erklärung der OG-spezifischen Klassen:

• .og-sdl-tile:
• Kategorie:
  • .og-sdl-type-written: Roter Hintergrund (schriftlich)
  • .og-sdl-type-oral: Blauer Hintergrund (mündlich)
  • .og-sdl-type-neutral: Grauer Hintergrund (Blocker oder neutral)
• Status:
  • .og-sdl-status-booked: Grüner Rahmen Hintergrund (gebucht)
  • .og-sdl-status-notbooked: Grauer Rahmen Hintergrund (nicht gebucht)
• Kalender:
  • .og-sdl-calendar-day-curret: Türkis Linie oben (aktueller Tag)
  • .og-sdl-calendar-day-past: Grauer Hintergrund (Vergangenheit)