Basics
Die Basics bilden die grundlegenden Designelemente und -prinzipien, die die visuellen und funktionalen Standards für Ihr Designsystem setzen. Sie legen die wichtigsten Regeln und Richtlinien fest, an die sich alle Controls und Components halten sollten.
Zum Beispiel gehört Typografie (Schriftarten, -größen und -abstände), Farbschemas (Primär- und Sekundärfarben sowie Text- und Hintergrundfarben) und Layoutprinzipien (Grid und Spacing). Diese Elemente sorgen für ein einheitliches Erscheinungsbild im gesamten Gestaltungssystem.
Typography
h1 - Heading 1
h2 - Heading 2
h3 - Heading 3
h4 - Heading 4
h5 - Heading 5
h6 - Heading 6
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?
Colors
Borders
Shadows
Icons
-
tk-icon-access-time
-
tk-icon-add-shopping-cart
-
tk-icon-add
-
tk-icon-adjust
-
tk-icon-arrow-back
-
tk-icon-arrow-downward
-
tk-icon-arrow-forward
-
tk-icon-arrow-upward
-
tk-icon-bar-chart
-
tk-icon-basket
-
tk-icon-bolt
-
tk-icon-calendar
-
tk-icon-call
-
tk-icon-check
-
tk-icon-chevron-left
-
tk-icon-chevron-right
-
tk-icon-cone-down
-
tk-icon-cross
-
tk-icon-dashboard-shape
-
tk-icon-dashboard
-
tk-icon-dashboard_customize
-
tk-icon-document-pdf
-
tk-icon-download
-
tk-icon-edit
-
tk-icon-error
-
tk-icon-expand-less
-
tk-icon-expand-more
-
tk-icon-filter
-
tk-icon-first-page
-
tk-icon-flag
-
tk-icon-folder
-
tk-icon-grid
-
tk-icon-headset
-
tk-icon-history
-
tk-icon-home-work
-
tk-icon-info
-
tk-icon-keyboard-backspace
-
tk-icon-keyboard-escape
-
tk-icon-keyboard-return
-
tk-icon-keyboard-tab
-
tk-icon-last-page
-
tk-icon-list
-
tk-icon-local-offer
-
tk-icon-login
-
tk-icon-menu
-
tk-icon-minimize
-
tk-icon-more
-
tk-icon-not-disturb
-
tk-icon-office-excel
-
tk-icon-office-word
-
tk-icon-opc-rectangle
-
tk-icon-page-view
-
tk-icon-people
-
tk-icon-percent
-
tk-icon-photo
-
tk-icon-pin
-
tk-icon-remove
-
tk-icon-room-service
-
tk-icon-save
-
tk-icon-search
-
tk-icon-settings
-
tk-icon-shopping-bag
-
tk-icon-short-text
-
tk-icon-sort
-
tk-icon-star-alt
-
tk-icon-star-filled
-
tk-icon-star
-
tk-icon-success
-
tk-icon-sync
-
tk-icon-tile
-
tk-icon-topseller
-
tk-icon-trash
-
tk-icon-undo
-
tk-icon-update
-
tk-icon-upload
-
tk-icon-user-circle
-
tk-icon-view-carousel
-
tk-icon-visibility-off
-
tk-icon-visibility
-
tk-icon-warning
Grid
Die $spacer-size-list oder in diesem Context $size bildet das 4pt Grid System dar.
$size
.spacer-[boundary][side]-$size
m
margin
p
padding
t
[boundary]-top
r
[boundary]-right
b
[boundary]-bottom
l
[boundary]-left
v
[boundary]-block
h
[boundary]-inline
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
Tile-Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dolor officia maxime aut eveniet necessitatibus illum voluptatibus accusamus eaque nobis?
.flex
display: flex;
.flex--gap-$size
gap: $size;
.flex--gap-x-$size
column-gap: $size;
.flex--gap-y-$size
row-gap: $size;
.flex--row
flex-direction: row;
.flex--row-reverse
flex-direction: row-reverse;
.flex--col
flex-direction: column;
.flex--col-reverse
flex-direction: column-reverse;
.flex--col-reverse
flex-direction: column-reverse;
.flex--wrap
flex-wrap: wrap;
.flex--wrap-reverse
flex-wrap: wrap-reverse;
.flex--nowrap
flex-wrap: nowrap;
.flex--justify-normal
justify-content: normal;
.flex--justify-start
justify-content: flex-start;
.flex--justify-end
justify-content: flex-end;
.flex--justify-center
justify-content: center;
.flex--justify-between
justify-content: space-between;
.flex--justify-around
justify-content: space-around;
.flex--justify-evenly
justify-content: space-evenly;
.flex--justify-stretch
justify-content: stretch;
.flex--items-start
align-items: flex-start;
.flex--items-end
align-items: flex-end;
Viewport
<tk-viewport>
Mit dieser Web Component hat man die Möglichkeit mit einer anderen Web Component einen Event Listener zu erstellen, um Informationen zu erhalten, wenn die Breakpoints erreicht werden beim Verändern des Viewports. Das Viewport Web Component ist im Window-Objekt initialisiert und kann somit von überall aus zugegriffen werden.
breakpoints: Map<Breakpoint, number>
data-tk-resize-event-name
Der Output des Events ist ein CustomEvent. Ein CustomEvent bietet das zusätzliche Property detail an. Im detail ist folgendes enthalten:
width