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

Variante


default	Icon + Text	Text	Icon
hover	Icon + Text	Text	Icon
pressed	Icon + Text	Text	Icon
disabled	Icon + Text	Text	Icon

Secondary

Variante


default	Icon + text	Text	Icon
hover	Icon + Text	Text	Icon
pressed	Icon + Text	Text	Icon
disabled	Icon + Text	Text	Icon

Tertiary

Variante


default	Icon + Text	Text	Icon
hover	Icon + Text	Text	Icon
pressed	Icon + Text	Text	Icon
disabled	Icon + Text	Text	Icon

Link

Variante


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

Variante


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 Label	Grösse M Label
hover	Grösse S Label	Grösse M Label
disabled	Grösse S Label	Grösse M Label
disabled/selected	Grösse S Label	Grösse M Label
selected	Grösse S Label	Grösse M Label
error	Grösse S Label LOL!	Grösse M Label 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

Variante


default	Date	Date	Date	Date
filled	Date	Date	Date	Date
hover	Date	Date	Date	Date
pressed	Date	Date	Date	Date
disabled	Date	Date	Date	Date
error	Date Required	Date Required	Date Required	Date Required
hint	Date Required	Date Required	Date Required	Date Required
placeholder	Date	Date	Date	Date
selected	Date	Date	Date	Date
multiple	Date	Date	Date	Date
range	Date	Date	Date	Date
range with disabled dates	Date	Date	Date	Date

Input

Variante


default	Label	Label	Label $	Label $
filled	Label	Label	Label $	Label $
hover	Label	Label	Label $	Label $
pressed	Label	Label	Label $	Label $
disabled	Label	Label	Label $	Label $
error	Label Required	Label Required	Label $ Required	Label $ Required
selected	Label	Label	Label $	Label $
Placeholder	Label	Label	Label $	Label $
hint	Label Required	Label Required	Label $ Required	Label $ Required
hint suffix	Label 0/50	Label 0/50	Label $ 0/50	Label $ 0/50

Material-Form-Felder

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

Variante


default	Label	Label	Label $$$	Label $
filled	Label	Label	Label $	Label $
hover	Label	Label	Label $	Label $
pressed	Label	Label	Label $	Label $
disabled	Label	Label	Label $	Label $
error	Label Required	Label Required	Label $ Required	Label $ Required
selected	Label	Label	Label $	Label $
hint	Label Required	Label Required	Label $ Required	Label $ Required
hint suffix	Label 0/50	Label 0/50	Label $ 0/50	Label $ 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

Variante


default	Label	Label	Label $	Label $
filled	Label	Label	Label $	Label $
hover	Label	Label	Label $	Label $
pressed	Label	Label	Label $	Label $
disabled	Label	Label	Label $	Label $
error	Label Required	Label Required	Label $ Required	Label $ Required
selected	Label	Label	Label $	Label $
placeholder	Label	Label	Label $	Label $
hint	Label Required	Label Required	Label $ Required	Label $ Required
hint suffix	Label 0/50	Label 0/50	Label $ 0/50	Label $ 0/50

Material-Form-Felder

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

Variante


default	Label	Label	Label $	Label $$$
filled	Label	Label	Label $	Label $
hover	Label	Label	Label $	Label $
pressed	Label	Label	Label $	Label $
disabled	Label	Label	Label $	Label $
error	Label Required	Label Required	Label $ Required	Label $ Required
selected	Label	Label	Label $	Label $
hint	Label Required	Label Required	Label $ Required	Label $ Required
hint suffix	Label Required	Label Required	Label $ Required	Label $ Required

Radio

	Grösse S	Grösse M
default	Grösse S Label	Grösse M Label
hover	Grösse S Label	Grösse M Label
disabled	Grösse S Label	Grösse M Label
disabled/selected	Grösse S Label	Grösse M Label
selected	Grösse S Label	Grösse M Label
error	Grösse S Label Error!	Grösse M Label Error!

Select

Variante


default	Label	Label	Label	Label
hover	Label	Label	Label	Label
pressed	Label	Label	Label	Label
disabled	Label	Label	Label	Label
error	Label Required	Label Required	Label Required	Label Required
hint	Label Required	Label Required	Label Required	Label Required
placeholder	Label	Label	Label	Label

Switch

Variante


default	Label	Label
disabled	Label	Label
disabled/selected	Label	Label
selected	Label	Label

Textarea

Variante


default	Label	Label	Label	Label
filled	Label Value	Label Value	Label Value	Label Value
hover	Label Value	Label Value	Label Value	Label Value
pressed	Label Value	Label Value	Label Value	Label Value
disabled	Label Value	Label Value	Label Value	Label Value
error	Label Value Required	Label Value Required	Label Value Required	Label Value Required
hint	Label Value Required	Label Value Required	Label Value Required	Label Value Required
hint suffix	Label Value 0/50	Label Value 0/50	Label Value 0/50	Label Value 0/50
placeholder	Label	Label	Label
selected	Label Value	Label Value	Label Value	Label Value

Timepicker

Variante


default	Time	Time	Time
filled	Time	Time	Time
hover	Time	Time	Time
pressed	Time	Time	Time
disabled	Time	Time	Time
error	Time Required	Time Required	Time Required
placeholder	Time	Time	Time
hint	Time Required	Time Required	Time Required
selected	Time	Time	Time

Toggle

Variante


default	Label	Label
hover	Label	Label
pressed	Label	Label
disabled	Label	Label
selected	Label	Label

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)


	Vorname Nachname E-Mail E-Mail Telefonnummer Format: (+41000000000) Aktuelles Passwort Neues Passwort Passwort wiederholen Funktion

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

	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

	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 Marke Artikel Titel Info/Detail CHF 80.00	default Aktion Marke Artikel Titel Info/Detail CHF 80.00 CHF 15.00
hover	hover Marke Artikel Titel Info/Detail CHF 80.00	hover Aktion Marke Artikel Titel Info/Detail CHF 80.00 CHF 15.00
pressed	pressed Marke Artikel Titel Info/Detail CHF 80.00	pressed Aktion 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.

Controls

Buttons

Forms

Tabs

Accordion

Search

File Upload

Sie wurden wegen Inaktivität abgemeldet.