Supportportal

Controls

Ein Control ist ein grundlegender Baustein in einem Designsystem, der ein bestimmtes UI-Element darstellt, das in der Regel eine bestimmte Funktion oder einen bestimmten Zweck hat. Controls haben oft einen kleineren Umfang und können Dinge wie Buttons, Input-Fields, Radio-Buttons, Checkboxes, Sliders und andere interaktive Elemente umfassen. Sie sind die grundlegenden Einheiten, die es den Benutzern ermöglichen, mit der Oberfläche zu interagieren und Aktionen auszuführen.

Zum Beispiel ein Button Control kann verschiedene Varianten (bsp. primary, secondary, disabled) und Zustände (bsp. hover, active) besitzen.

Buttons

Jeder Button nutzt den Block .tk-button, dass das allgemeine Styling eines Buttons definiert. Dabei gibt es immer folgende zwei Elemente: .tk-button__label und .tk-button__icon.

Primary
Grösse S
Grösse M
Grösse L
default
hover
pressed
disabled
Code
Secondary
Grösse S
Grösse M
Grösse L
default
hover
pressed
disabled
Code
Tertiary
Grösse S
Grösse M
Grösse L
default
hover
pressed
disabled
Code
Link
Grösse S
Grösse M
default
Label Label
Label Label
hover
Label Label
Label Label
pressed
Label Label
Label Label
disabled
Label Label
Label Label
Code
Link Dark
Grösse S
Grösse M
default
Label Label
Label Label
hover
Label Label
Label Label
pressed
Label Label
Label Label
disabled
Label Label
Label Label
Code
Link Icon Animated
Grösse S
Grösse M
default
Label
Label
hover
Label
Label
pressed
Label
Label
disabled
Label
Label
Code
Header
default
hover
pressed
disabled
seleceted
Code
Account
default
Mein Konto Abmelden
hover
pressed
disabled
selected
Code

Labels

Labels können auch als Navigationselement eingesetzt und funktionieren dann wie Tabs. Es ist immer ein Label aktiv und alle anderen inaktiv.
Jedes Label nutzt den Block .tk-label, dass das allgemeine Styling eines Labels definiert.

Primary
Grösse S
Grösse M
Grösse L
default
Label
Label
Label
hover
Label
Label
Label
pressed
Label
Label
Label
selected
Label
Label
Label
disabled
Label
Label
Label
Code
Secondary
Grösse S
Grösse M
Grösse L
default
Label
Label
Label
hover
Label
Label
Label
pressed
Label
Label
Label
selected
Label
Label
Label
disabled
Label
Label
Label
Code
Negative
Grösse S
Grösse M
Grösse L
default
Label
Label
Label
hover
Label
Label
Label
pressed
Label
Label
Label
selected
Label
Label
Label
disabled
Label
Label
Label
Code
Static default
Grösse S
Grösse M
Grösse L
default
Label
Label
Label
Label
Label
Label
Code
Static grey
Grösse S
Grösse M
Grösse L
default
Label
Label
Label
Label
Label
Label
Code

Forms

Checkbox
Grösse S
Grösse M
default
hover
disabled
disabled/selected
selected
error
LOL!
LOL!
Date
Grösse S
Grösse M
default
31
31
hover
31
31
pressed
31
31
disabled
31
31
today
31
31
selected
31
31
Datepicker
default
filled
hover
pressed
disabled
error
Required
Required
Required
Required
hint
Required
Required
Required
Required
placeholder
selected
multiple
range
range with disabled dates
Input


default
$
$
filled
$
$
hover
$
$
pressed
$
$
disabled
$
$
error
Required
Required
$
Required
$
Required
selected
$
$
Placeholder
$
$
hint
Required
Required
$
Required
$
Required
hint suffix
0/50
0/50
$
0/50
$
0/50
Material-Form-Felder

Bei den Material-Form-Fields muss das Label wegen des ~-Selektors zwingend nach dem Input Element eingefügt werden!

Material
default
$$$
$
filled
$
$
hover
$
$
pressed
$
$
disabled
$
$
error
Required
Required
$
Required
$
Required
selected
$
$
hint
Required
Required
$
Required
$
Required
hint suffix
0/50
0/50
$
0/50
$
0/50
Language
Grösse S
Grösse M
default
  • DE
  • DE
hover
  • DE
  • DE
pressed
  • DE
  • DE
disabled
  • DE
  • DE
selected
  • DE
  • DE
List Item
Grösse S
Grösse M
Sublabel
default
hover
hover/selected
pressed
pressed/selected
disabled
disabled/selected
selected
Code
Code (Selected)
Number
default
$
$
filled
$
$
hover
$
$
pressed
$
$
disabled
$
$
error
Required
Required
$
Required
$
Required
selected
$
$
placeholder
$
$
hint
Required
Required
$
Required
$
Required
hint suffix
0/50
0/50
$
0/50
$
0/50
Material-Form-Felder

Bei den Material-Form-Fields muss das Label wegen des ~-Selektors zwingend nach dem Input Element eingefügt werden!

default
$
$$$
filled
$
$
hover
$
$
pressed
$
$
disabled
$
$
error
Required
Required
$
Required
$
Required
selected
$
$
hint
Required
Required
$
Required
$
Required
hint suffix
Required
Required
$
Required
$
Required
Radio
Grösse S
Grösse M
default
hover
disabled
disabled/selected
selected
error
Error!
Error!
Select
default
hover
pressed
disabled
error
Required
Required
Required
Required
hint
Required
Required
Required
Required
placeholder
Switch
default
disabled
disabled/selected
selected
Textarea
default
filled
hover
pressed
disabled
error
Required
Required
Required
Required
hint
Required
Required
Required
Required
hint suffix
0/50
0/50
0/50
0/50
placeholder
selected
Timepicker
default
filled
hover
pressed
disabled
error
Required
Required
Required
placeholder
hint
Required
Required
Required
selected
Toggle
default
hover
pressed
disabled
selected
Rangeslider
Grösse S
Grösse M
default
cm
cm
cm
cm
hover
cm
cm
cm
cm
disabled
cm
cm
cm
cm
selected
cm
cm
cm
cm
filled
cm
cm
cm
cm
Form (Formvalidator)
Format: (+41000000000)
WYSIWYG (Static-Content)
Um den Editier-Button zu sehen, musst du angemeldet sein!
gFunction {gGetStaticContent()}

Die G-Funktion kann normal genutzt werden. Es gibt dafür zwei neue Razor-Templates. {"layout":"tk-static-content", "async":"tk-static-content-editor-async"}.
Aus Performence-Gründen wird die Library des TinyMCE (opacc.editor.js) erst geladen, wenn der Editier-Button im Zugriff liegt.

Tabs

Tabs
S L
default default - S
default - L
hover hover - S
hover - L
pressed pressed - S
pressed - L
selected selected - S
selected - L
Tabgroup
S L
S

Tab 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab 3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 		L

Tab 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab 3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Web Component <tk-tabs-tab>
Elemente (BEM) Beschreibung
Elemente (BEM) .tk-tabs-tab__head Beschreibung

Wrapper für die einzelnen Tab's.
Elemente (BEM) .tk-tabs-tab__item Beschreibung

Styling-Klasse für ein Tab
Elemente (BEM) .tk-tabs-tab__body Beschreibung

Wrapper für die Inhalte der Tab's.
Elemente (BEM) .tk-tabs-tab__content Beschreibung

Styling-Klasse für Inhalt eines Tab's.
Modifier (BEM) Beschreibung
Modifier (BEM) .tk-tabs-tab__item--size-s Beschreibung

Modifier für die Grösse des Tabs.
Modifier (BEM) .tk-tabs-tab__item--size-l Beschreibung

Modifier für die Grösse des Tabs.
Selektoren Beschreibung
Selektoren [data-tk-tab-head] Beschreibung

Selektor um die Anzahl der Tabs zu ermitteln.
Selektoren [data-tk-tab-body] Beschreibung

Selektor um die Anzahl der Inhalts-Container zu ermitteln.
Data-Attribut TypeScript-Type Default Beschreibung
Data-Attribut data-tk-initial-tab TypeScript-Type

string

 Default

1

 Beschreibung

Index des initial geöffneten Tab
Data-Attribut data-tk-active-class-name TypeScript-Type

string

 Default tk-tabs-tab--active Beschreibung

CSS-Klasse für das aktive Tab und den aktiven Content.

Accordion

Accordion
light dark
default default - light
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.

 		default - dark
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.
hover hover - light
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.

 		hover - dark
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.
pressed pressed - light
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.

 		pressed - dark
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.
selected selected - light
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.

 		selected - dark
Level 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi.
Web Component <tk-tabs-accordion>
Elemente (BEM) Beschreibung
Elemente (BEM) .tk-tabs-accordion__head Beschreibung

Wrapper für den Titel des Accordion.
Elemente (BEM) .tk-tabs-accordion__body Beschreibung

Wrapper für den Inhalt des Accordion.
Elemente (BEM) .tk-tabs-accordion__content Beschreibung

Eigentlicher Inhalt des Accordion.
Modifier (BEM) Beschreibung
Modifier (BEM) .tk-tabs-accordion--active Beschreibung

Modifier für den Aktiv-Status.
Modifier (BEM) .tk-tabs-accordion--dark Beschreibung

Modifier für die Anzeige eines dunklen Accordions.
Selektoren Beschreibung
Selektoren [data-tk-accordion-is-active] Beschreibung

Initialer Zustand als geöffnet definieren.
Selektoren [data-tk-accordion-head] Beschreibung

Selektor für den Click-Event zu registrieren um das öffnen / schliessen des Accordions zu triggern.
Selektoren [data-tk-accordion-body] Beschreibung

Selektor um Inhalts-Container zu ermitteln.
Selektoren [data-tk-accordion-icon] Beschreibung

Selektor für das Accordion Icon.
Data-Attribut TypeScript-Type Default Beschreibung
Data-Attribut data-tk-icon-open TypeScript-Type

string

 Default tk-icon-add Beschreibung

Icon-CSS-Klasse um das Accordion zu öffnen
Data-Attribut data-tk-icon-collapse TypeScript-Type

string

 Default tk-icon-remove Beschreibung

CSS-Klasse für das "schliessen" Icon.
Data-Attribut data-tk-active-class-name TypeScript-Type

string

 Default tk-tabs-accordion--active Beschreibung

CSS-Klasse für die Definition des aktiven Accordions.

Search

Grösse L
default
filled
hover
pressed
selected
Grösse S
default
filled
hover
pressed
selected
Search-Item
default default
image
Marke Artikel Titel
Info/Detail
CHF 80.00
default
Aktion
image
Marke Artikel Titel
Info/Detail
CHF 80.00 CHF 15.00
hover hover
image
Marke Artikel Titel
Info/Detail
CHF 80.00
hover
Aktion
image
Marke Artikel Titel
Info/Detail
CHF 80.00 CHF 15.00
pressed pressed
image
Marke Artikel Titel
Info/Detail
CHF 80.00
pressed
Aktion
image
Marke Artikel Titel
Info/Detail
CHF 80.00 CHF 15.00
Web Component <tk-search>
Die Codebeispiele zur Web Component sind in den Komponenten abgebildet.

File Upload

Area
Web Component <tk-file-upload-area>

Die Web Component <tk-file-upload-area> verwendet die Library Uppy. Uppy lädt Dateien lokal und von entfernten Orten wie Dropbox oder Instagram herunter. Mit seiner nahtlosen Integration, Zuverlässigkeit und Benutzerfreundlichkeit ist Uppy wirklich Ihr bester Freund beim Hochladen von Dateien.

Für unsere Anwendung wurden zusätzlich noch weitere Plugins installiert von Uppy.

  • XHR-Upload - Für das Hochladen der Bilder als XHR-Request.
  • Dashboard - Ein UI Element für das Verwalten der Hinzugefügten Bildern.
  • Compressor - Für das Komprimieren von Bildern.
  • Locales - Ein Sprachpaket für das Übersetzen der Texte.

Data-Attribut TypeScript-Type Default Beschreibung
Data-Attribut data-tk-api TypeScript-Type

string | undefined

 Default undefined Beschreibung

Auf diesem Attribut kann der Endpoint angegeben werden. z.B. /api/portal/v1/upload/
Data-Attribut data-tk-move-api TypeScript-Type

string | undefined

 Default undefined Beschreibung

Hier wird die URL eines OC's/RD's angegeben um die Datei vom /Temp zu einem belieben Ort zu verschieben z.B. KundenUpload.
Data-Attribut data-tk-usage TypeScript-Type

string | undefined

 Default undefined Beschreibung

Für den Endpoint braucht es einen Usage-String. Das kann ein belieber String sein. Im application.cnf gibt es eine vordefinierte Variable: TK.FILEUPLOAD.Usage
Data-Attribut data-tk-file-path TypeScript-Type

string | undefined

 Default undefined Beschreibung

Zu welchem Pfad sollte die Datei vom /Temp verschoben werden. Wird als FormData als path mitgegeben.
Data-Attribut data-tk-disable-compressor TypeScript-Type

boolean

 Default false Beschreibung

Hiermit kann das Komprimieren der Files deaktiviert werden.
Data-Attribut data-tk-output-mime-type TypeScript-Type

string

 Default image/webp Beschreibung

Hiermit kann das MIMEType definiert werden, dass vom ComposerJS verwendet werden soll. Der Wert wird ignoriert, wenn das Komprimieren deaktiviert ist.
Data-Attribut data-tk-max-number-of-files TypeScript-Type

number | null

 Default null Beschreibung

Hier kann die maximale Anzahl der Files eingestellt werden.
Data-Attribut data-tk-max-file-size TypeScript-Type

number | null

 Default null Beschreibung

Hier kann die maximale Grösse der Datei eingestellt werden.
Data-Attribut data-tk-allowed-file-types TypeScript-Type

string

 Default image/* Beschreibung

Hier können die erlaubten File-Typen eingestellt werden. Um mehrere anzugeben, wird Komma-Getrennt.
Data-Attribut data-tk-locale TypeScript-Type

number

 Default 1 Beschreibung

Hier kann die Sprache eingestellt werden. 1 = Deutsch, 2 = Französisch, 3 = Englisch, 4 = Italienisch
Data-Attribut data-tk-disable-unique-file-names TypeScript-Type

boolean

 Default false Beschreibung

Hier kann eingestellt werden, ob der Dateiname eindeutig sein soll. Dafür wird die uuidv4() genutzt.
Data-Attribut data-tk-file-prefix TypeScript-Type

string | undefined

 Default undefined Beschreibung

Hier kann ein Prefix für den Dateinamen eingestellt werden.