Deutsch Italiano

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
default Icon + Text Text Icon
hover Icon + Text Text Icon
pressed Icon + Text Text Icon
disabled Icon + Text Text Icon
Secondary
default Icon + text Text Icon
hover Icon + Text Text Icon
pressed Icon + Text Text Icon
disabled Icon + Text Text Icon
Tertiary
default Icon + Text Text Icon
hover Icon + Text Text Icon
pressed Icon + Text Text Icon
disabled Icon + Text Text Icon
Link
default Label Label Icon + Label Label
hover Label Label Icon + Label Label
pressed Label Label Icon + Label Label
disabled Label Label Icon + Label Label
Link Dark
default Label Label Icon + Label Label
hover Label Label Icon + Label Label
pressed Label Label Icon + Label Label
disabled Label Label Icon + Label Label
Header
default
hover
pressed
disabled
seleceted
Account
default Kiener + Wittlin AG Intern
Übersicht Finanzen Mein Konto
Abmelden
hover
pressed
disabled
seleceted

Forms

Checkbox
Grösse S Grösse M
default Grösse S Grösse M
hover Grösse S Grösse M
disabled Grösse S Grösse M
disabled/selected Grösse S Grösse M
selected Grösse S Grösse M
error Grösse S
LOL!
 		Grösse M
LOL!
Date
Grösse S Grösse M
default Grösse S
31
Grösse M
31
hover Grösse S
31
Grösse M
31
pressed Grösse S
31
Grösse M
31
disabled Grösse S
31
Grösse M
31
today Grösse S
31
Grösse M
31
selected Grösse S
31
Grösse M
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!

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 Grösse S
  • DE
Grösse M
  • DE
hover Grösse S
  • DE
Grösse M
  • DE
pressed Grösse S
  • DE
Grösse M
  • DE
disabled Grösse S
  • DE
Grösse M
  • DE
selected Grösse S
  • DE
Grösse M
  • DE
List Item
Grösse S Grösse M Sublabel
default Grösse S Grösse M Sublabel
hover Grösse S Grösse M Sublabel
hover/selected Grösse S Grösse M Sublabel
pressed Grösse S Grösse M Sublabel
pressed/selected Grösse S Grösse M Sublabel
disabled Grösse S Grösse M Sublabel
disabled/selected Grösse S Grösse M Sublabel
selected Grösse S Grösse M Sublabel
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 Grösse S Grösse M
hover Grösse S Grösse M
disabled Grösse S Grösse M
disabled/selected Grösse S Grösse M
selected Grösse S Grösse M
error Grösse S
Error!
 		Grösse M
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 Grösse S
cm
cm
Grösse M
cm
cm
hover Grösse S
cm
cm
Grösse M
cm
cm
disabled Grösse S
cm
cm
Grösse M
cm
cm
selected Grösse S
cm
cm
Grösse M
cm
cm
filled Grösse S
cm
cm
Grösse M
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
pressed disabled - S
disabled - 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
Action
image
Marke Artikel Titel
Info/Detail
CHF 80.00 CHF 15.00
hover hover
image
Marke Artikel Titel
Info/Detail
CHF 80.00
hover
Action
image
Marke Artikel Titel
Info/Detail
CHF 80.00 CHF 15.00
pressed pressed
image
Marke Artikel Titel
Info/Detail
CHF 80.00
pressed
Action
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.