UI-Komponenten

Diese Seite stellt eine kurze Übersicht über die wichtigsten Komponenten dar, die zum Bau eines Viewers benötigt werden. Eine Übersicht aller Komponenten finden Sie in unserer Showcase-Anwendung samt Code-Beispielen, welche hier zu finden ist.

tip

In den folgenden Beispielen wird die Viewer-Komponente als View-Child mit #viewerComponent referenziert. Diese Variable wird oftmals an andere Komponenten weitergegeben.

Viewer

<jwt-multi-mode-viewer #viewerComponent
                       (sourceChanged)="source = $event"
                       (passwordRequired)="passwordRequiredSource = $event"
                       (pageCountChanged)="pageCountChanged($event)"
                       (documentChanged)="documentChanged($event)"
                       (pageIndexChanged)="currentPageIndex = $event"
                       [source]="source" />

Toolbar

<jadice-common-toolbar [provider]="viewerComponent" [config]="TOOLBAR_CONFIG" />

Toolbar-Config

    readonly TOOLBAR_CONFIG: ToolbarConfig<Viewer> = DefaultToolbar.CONFIG;

Die Default-Config

Thumbnail-View

<jwt-thumbnail-panel #thumbnailPanelComponent
                     [viewerProvider]="viewerComponent"
                     [document]="currentDocument"
                     [pages]="pages"
                     (pageClicked)="pageSelected($event)"
                     [currentPageIndex]="currentPageIndex" />

jadice-common-components

Die jadice-common-components ist eine Library, die UI-Komponenten zur Verfügung stellt, die bei Verwendung mit dem jadice Viewer für ein Einheitliches Look&Feel sorgen. Ähnlich wie bei Angular Material stehen Komponenten zur Verfügung die angepasst und gestyled werden können. Aktuell existieren die folgenden Komponenten:

• Button
• Button-Group
• Floating Toolbar
• Info-Bar
• Loading-Indicator
• Menü
• PillBox
• Separator
• Toolbar
• Tooltip

Annotation-Panel

 <jwt-annotation-panel [viewerProvider]="viewerComponent"
                       (annotationSelected)="pageSelected($event)"
                       [annotationProfile]="annotationProfile$ | async" />

Advanced Search

<jwt-advanced-search-panel [viewerProvider]="viewerComponent" />