df-webcomponents
v0.2.0
Published
Digital First Web Components
Downloads
34
Readme
Digital First Web Components
Dieses Repository beinhaltet die Web Komponenten des Projektes Digital First.
Einbinden mit Script Tag (Ohne JS Framework)
- Um alle Komponenten einzubinden kann das unpckg CDN benutzt werden:
<script type="module"
src="https://unpkg.com/[email protected]/dist/df-webcomponents/df-webcomponents.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/[email protected]/dist/df-webcomponents/df-webcomponents.js"></script>
- Ab sofort können die Elemente überall im Template, JSX, HTML etc benutzt werden.
Einbinden mit NPM (Vue, Angular, React)
- Installieren der Abhängigkeiten mit
npm install df-webcomponents --save
Vue
- Import der Komponenten
- Vue mitteilen, benutzerdefinierte Element Tags zu ignorieren
- Komponente an das Window Objekt binden
import Vue from 'vue';
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from 'df-webcomponents/loader';
Vue.config.productionTip = false;
// Tell Vue to ignore all components defined in the df-webcomponents
// package. The regex assumes all components names are prefixed
// 'df'
Vue.config.ignoredElements = [/df-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements(window);
});
new Vue({
render: h => h(App)
}).$mount('#app');
React
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { applyPolyfills, defineCustomElements } from 'df-webcomponents/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements(window);
});
Angular (Noch nicht getestet!)
Using a Stencil built web component collection within an Angular CLI project is a two-step process. We need to:
- Include the
CUSTOM_ELEMENTS_SCHEMA
in the modules that use the components. - Call
defineCustomElements(window)
frommain.ts
(or some other appropriate place).
Including the Custom Elements Schema
Including the CUSTOM_ELEMENTS_SCHEMA
in the module allows the use of the web components in the HTML markup without the compiler producing errors this code should be added into the AppModule
and in every other modules that use your custom elements.
Here is an example of adding it to AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
The CUSTOM_ELEMENTS_SCHEMA
needs to be included in any module that uses custom elements.
Calling defineCustomElements
A component collection built with Stencil includes a main function that is used to load the components in the collection. That function is called defineCustomElements()
and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts
as such:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// Note: loader import location set using "esmLoaderPath" within the output target confg
import { defineCustomElements } from 'df-webcomponents/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);
Edge and IE11 polyfills
If you want your custom elements to be able to work on older browser, you should add the applyPolyfills()
that surrond the defineCustomElements()
function.
import { applyPolyfills, defineCustomElements } from 'df-webcomponents/loader';
...
applyPolyfills().then(() => {
defineCustomElements(window)
})
Accessing components using ViewChild and ViewChildren
Once included, components could be referenced in your code using ViewChild
and ViewChildren
as in the following example:
import {Component, ElementRef, ViewChild} from '@angular/core';
import 'test-components';
@Component({
selector: 'app-home',
template: `<test-components #test></test-components>`,
styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
@ViewChild('test') myTestComponent: ElementRef<HTMLTestComponentElement>;
async onAction() {
await this.myTestComponent.nativeElement.testComponentMethod();
}
}
Akkordeons
Ein Akkordeon-Menü ist eine vertikal angeordnete Liste mit Überschriften, die "on click" Inhalte anzeigen oder verbergen.
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ---------------------- | --------- | ----------- |
| heading
| heading
| Setzt die Überschrift. | string
| undefined
|
| id
| id
| Setzt die id. | string
| undefined
|
| xl
| xl
| Setzt die Größe. | boolean
| false
|
Built with StencilJS
Alerts
Meldungen werden in der Desktop-Ansicht mit der vollen Hauptbreite des aktuellen Bereichs angezeigt. Wenn es eine Marginal Spalte oder Navigationsspalte gibt, dann geht diese nur über den verbleibenden Haupt-Inhaltsbereich (z.B. 7 Spalten).
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| dismissable
| dismissable
| Wegklickbar? | boolean
| false
|
| titel
| titel
| Setzt den Titel | string
| undefined
|
| type
| type
| Setzt den Typ. Mögliche Optionen: success
, warning
, danger
| string
| "warning"
|
Built with StencilJS
Badges
Badges sind Abzeichen, welche mittels Attributen verändert werden können.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | -------------------------------------------------------------------------------- | -------- | ----------- |
| href
| href
| Setzt den Link | string
| undefined
|
| type
| type
| Setz den Typ. Mögliche Optionen: success
, warning
, danger
, info
, light
| string
| undefined
|
Built with StencilJS
df-breadcrumb
Built with StencilJS
df-breadcrumb-item
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------- | ----------- |
| link
| link
| Link | string
| undefined
|
Built with StencilJS
df-button
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------- | ----------- |
| link
| link
| Link | string
| undefined
|
| size
| size
| Typ | string
| undefined
|
| type
| type
| Typ | string
| undefined
|
Built with StencilJS
Cards
Cards repräsentieren Informationen in der Form einer Kachel, bei der es einen getrennten Header und einen Kontenbereich gibt.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------- | -------- | ----------- |
| titel
| titel
| Setzt den Titel. | string
| "Fenster"
|
Built with StencilJS
Datepicker
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der DatePicker in einer HTML Form abgesendet wird. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
df-email
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ----------- |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "email"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
Icons
Für Icons wird ausschließlich die Bibliothek Glyphicons Pro in der Version 2 benutzt. Es werden keine WebFonts, wie in den Glyphicon-Vorgängerversionen benutzt, sondern SVG-Dateien. Für jedes benötigtes Icon, wird eine SVG-Datei als statischer Content bereitgestellt. Dieses Verfahren hat den Vorteil, dass im Gegensatz zu den WebFonts, viel weniger Daten an den Browser übertragen werden müssen. SVG-Datein sind viel kleiner im Vergleich zu WebFonts und es werden nur die benötigten Grafiken übertragen. Größe und Farben werden über CSS zugewiesen (font-size, color).
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------------------------------------------------------------------- | -------- | ----------- |
| icon
| icon
| Setzt das Icon. Mögliche Icons können in der Dokumentation gefunden werden. | string
| undefined
|
Built with StencilJS
df-input
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der Text in einer HTML Form abgesendet wird. | string
| undefined
|
| placeholder
| placeholder
| Setzt den Placeholder. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
df-li
Built with StencilJS
Hyperlinks
Hyperlinks führen zu einer anderen Seite oder zu weiteren Informationen.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| href
| href
| Setzt den Wert für href. | string
| undefined
|
| target
| target
| Setzt den Wert für target. Möglich sind folgende Standardwerte: _self
, _top
, _blank
, _parent
, and _search
. | string
| undefined
|
Built with StencilJS
df-list
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | -------------------- | --------- | ------- |
| ordered
| ordered
| Legt fest ob ordered | boolean
| false
|
Built with StencilJS
df-number
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ----------- |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "number"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
df-password
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ------------ |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "passwort"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
df-picturebox
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | -------------------------------- | -------- | ----------- |
| alt
| alt
| Setzt die HTML Bildbeschreibung. | string
| undefined
|
| caption
| caption
| Setzt die Bildunterschrift. | string
| undefined
|
| src
| src
| Setzt die Bildquelle. | string
| undefined
|
Built with StencilJS
Text
Das Text Component erlaubt es dem Benutzer, Text oder Zahleneingaben in einer Zeile zu machen.
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der Text in einer HTML Form abgesendet wird. | string
| undefined
|
| placeholder
| placeholder
| Setzt den Placeholder. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
Textareas
Die Textarea bietet Platz für einen längeren, mehrspaltigen Text.
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------------ | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| false
|
| hint
| hint
| Setzt eine Hinweisnachricht. | string
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit dem die TextArea in einer HTML Form abgesendet wird. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
| required
| required
| Legt fest ob required | boolean
| false
|
| rows
| rows
| Setzt die Anzahl der Reihen. Hinweis: Muss 3 oder größer sein. | number
| 3
|
Built with StencilJS
my-component
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------- | -------- | ----------- |
| first
| first
| The first name | string
| undefined
|
| last
| last
| The last name | string
| undefined
|
| middle
| middle
| The middle name | string
| undefined
|
Built with StencilJS
Akkordeons
Ein Akkordeon-Menü ist eine vertikal angeordnete Liste mit Überschriften, die "on click" Inhalte anzeigen oder verbergen.
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ---------------------- | --------- | ----------- |
| heading
| heading
| Setzt die Überschrift. | string
| undefined
|
| id
| id
| Setzt die id. | string
| undefined
|
| xl
| xl
| Setzt die Größe. | boolean
| false
|
Built with StencilJS
Alerts
Meldungen werden in der Desktop-Ansicht mit der vollen Hauptbreite des aktuellen Bereichs angezeigt. Wenn es eine Marginal Spalte oder Navigationsspalte gibt, dann geht diese nur über den verbleibenden Haupt-Inhaltsbereich (z.B. 7 Spalten).
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| dismissable
| dismissable
| Wegklickbar? | boolean
| false
|
| titel
| titel
| Setzt den Titel | string
| undefined
|
| type
| type
| Setzt den Typ. Mögliche Optionen: success
, warning
, danger
| string
| "warning"
|
Built with StencilJS
Badges
Badges sind Abzeichen, welche mittels Attributen verändert werden können.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | -------------------------------------------------------------------------------- | -------- | ----------- |
| href
| href
| Setzt den Link | string
| undefined
|
| type
| type
| Setz den Typ. Mögliche Optionen: success
, warning
, danger
, info
, light
| string
| undefined
|
Built with StencilJS
df-breadcrumb
Built with StencilJS
df-breadcrumb-item
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------- | ----------- |
| link
| link
| Link | string
| undefined
|
Built with StencilJS
df-button
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------- | ----------- |
| link
| link
| Link | string
| undefined
|
| size
| size
| Typ | string
| undefined
|
| type
| type
| Typ | string
| undefined
|
Built with StencilJS
Cards
Cards repräsentieren Informationen in der Form einer Kachel, bei der es einen getrennten Header und einen Kontenbereich gibt.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------- | -------- | ----------- |
| titel
| titel
| Setzt den Titel. | string
| "Fenster"
|
Built with StencilJS
Datepicker
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der DatePicker in einer HTML Form abgesendet wird. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
df-email
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ----------- |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "email"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
Icons
Für Icons wird ausschließlich die Bibliothek Glyphicons Pro in der Version 2 benutzt. Es werden keine WebFonts, wie in den Glyphicon-Vorgängerversionen benutzt, sondern SVG-Dateien. Für jedes benötigtes Icon, wird eine SVG-Datei als statischer Content bereitgestellt. Dieses Verfahren hat den Vorteil, dass im Gegensatz zu den WebFonts, viel weniger Daten an den Browser übertragen werden müssen. SVG-Datein sind viel kleiner im Vergleich zu WebFonts und es werden nur die benötigten Grafiken übertragen. Größe und Farben werden über CSS zugewiesen (font-size, color).
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------------------------------------------------------------------- | -------- | ----------- |
| icon
| icon
| Setzt das Icon. Mögliche Icons können in der Dokumentation gefunden werden. | string
| undefined
|
Built with StencilJS
df-input
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der Text in einer HTML Form abgesendet wird. | string
| undefined
|
| placeholder
| placeholder
| Setzt den Placeholder. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
df-li
Built with StencilJS
Hyperlinks
Hyperlinks führen zu einer anderen Seite oder zu weiteren Informationen.
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| href
| href
| Setzt den Wert für href. | string
| undefined
|
| target
| target
| Setzt den Wert für target. Möglich sind folgende Standardwerte: _self
, _top
, _blank
, _parent
, and _search
. | string
| undefined
|
Built with StencilJS
df-list
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | -------------------- | --------- | ------- |
| ordered
| ordered
| Legt fest ob ordered | boolean
| false
|
Built with StencilJS
df-number
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ----------- |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "number"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
df-password
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | --------- | ------------ |
| disabled
| disabled
| | boolean
| undefined
|
| label
| label
| | string
| undefined
|
| name
| name
| | string
| "passwort"
|
| placeholder
| placeholder
| | string
| undefined
|
| readonly
| readonly
| | boolean
| undefined
|
Built with StencilJS
df-picturebox
Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | -------------------------------- | -------- | ----------- |
| alt
| alt
| Setzt die HTML Bildbeschreibung. | string
| undefined
|
| caption
| caption
| Setzt die Bildunterschrift. | string
| undefined
|
| src
| src
| Setzt die Bildquelle. | string
| undefined
|
Built with StencilJS
Text
Das Text Component erlaubt es dem Benutzer, Text oder Zahleneingaben in einer Zeile zu machen.
Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ---------------------------------------------------------------- | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit der Text in einer HTML Form abgesendet wird. | string
| undefined
|
| placeholder
| placeholder
| Setzt den Placeholder. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
Built with StencilJS
Textareas
Die Textarea bietet Platz für einen längeren, mehrspaltigen Text.
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------------ | --------- | ----------- |
| disabled
| disabled
| Legt fest ob disabled | boolean
| false
|
| hint
| hint
| Setzt eine Hinweisnachricht. | string
| undefined
|
| label
| label
| Setzt das Label. | string
| undefined
|
| name
| name
| Setzt den Namen mit dem die TextArea in einer HTML Form abgesendet wird. | string
| undefined
|
| readonly
| readonly
| Legt fest ob readonly | boolean
| undefined
|
| required
| required
| Legt fest ob required | boolean
| false
|
| rows
| rows
| Setzt die Anzahl der Reihen. Hinweis: Muss 3 oder größer sein. | number
| 3
|
Built with StencilJS
my-component
Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | --------------- | -------- | ----------- |
| first
| first
| The first name | string
| undefined
|
| last
| last
| The last name | string
| undefined
|
| middle
| middle
| The middle name | string
| undefined
|
Built with StencilJS