@kor-ui/kor
Version:
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.
1,084 lines (1,082 loc) • 43 kB
HTML
<html lang="en" theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Component Playground</title>
<link rel="stylesheet" href="kor-styles.css" />
<script src="index.js"></script>
</head>
<body>
<!-- page -->
<kor-page>
<!-- app bar -->
<kor-app-bar
slot="top"
logo="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg"
label="MyApp"
>
<kor-tabs>
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-icon
slot="functions"
button
icon="brightness_3"
onclick="document.documentElement.setAttribute('theme', 'dark')"
></kor-icon>
<kor-icon
slot="functions"
button
icon="brightness_7"
onclick="document.documentElement.setAttribute('theme', 'light')"
></kor-icon>
<kor-icon
slot="left"
button
icon="brightness_3"
onclick="document.documentElement.setAttribute('theme', 'dark')"
></kor-icon>
<kor-icon
slot="right"
button
icon="brightness_7"
onclick="document.documentElement.setAttribute('theme', 'light')"
></kor-icon>
<!-- avatar -->
<kor-avatar
slot="functions"
label="First Middle Last"
info="Information text"
image="https://i1.wp.com/www.docker.com/blog/wp-content/uploads/2019/10/Renee-M.jpg?fit=753%2C1024&ssl=1"
></kor-avatar>
</kor-app-bar>
<kor-nav-bar slot="top">
<kor-tabs>
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-icon slot="functions" button icon="save"></kor-icon>
</kor-nav-bar>
<!-- panes -->
<kor-pane slot="left" label="Left Pane">
<kor-accordion label="Accordion">
<kor-icon icon="save" button slot="functions"></kor-icon>
<kor-icon icon="save" button slot="functions"></kor-icon>
<kor-input></kor-input>
<kor-input></kor-input>
<kor-button label="Label" slot="footer"></kor-button>
<kor-button label="Label" slot="footer"></kor-button>
</kor-accordion>
<kor-accordion label="Textarea">
<kor-textarea label="Autofocus" autofocus></kor-textarea>
<kor-textarea label="Empty"></kor-textarea>
<kor-textarea
label="Pre-filled"
value="Lorem ipsum dolor sit amet"
></kor-textarea>
<kor-textarea
label="2 Rows"
rows="2"
value="Lorem ipsum dolor sit amet"
></kor-textarea>
<kor-textarea
label="4 Rows Readonly"
rows="4"
readonly
value="Lorem ipsum dolor sit amet"
></kor-textarea>
<kor-textarea
label="4 Rows Disabled"
rows="4"
disabled
value="Lorem ipsum dolor sit amet"
></kor-textarea>
</kor-accordion>
<!-- image -->
<kor-accordion label="Image">
<kor-image
src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"
legend="Inner top legend"
legend-position="inner-top"
>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
</kor-image>
<kor-image
src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"
legend="Inner bottom legend"
legend-position="inner-bottom"
>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
</kor-image>
<kor-image
src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"
legend="Bottom legend"
>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
</kor-image>
<kor-image
src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"
width="160"
height="320"
fit="cover"
>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
<kor-icon icon="save" slot="top"></kor-icon>
<kor-icon icon="save" slot="bottom"></kor-icon>
</kor-image>
</kor-accordion>
<!-- slider -->
<kor-accordion label="Slider">
<kor-slider></kor-slider>
<kor-slider label="Label" value="50"></kor-slider>
<kor-slider
label="Label"
min="0"
max="200"
step="10"
value="150"
></kor-slider>
<kor-slider
label="Label"
min="0"
max="200"
step="10"
value="150"
input
></kor-slider>
</kor-accordion>
<!-- switch -->
<kor-accordion label="Switch">
<kor-switch>
<kor-switch-item label="First" disabled></kor-switch-item>
<kor-switch-item label="Second"></kor-switch-item>
<kor-switch-item label="Active" active></kor-switch-item>
</kor-switch>
<kor-switch>
<kor-switch-item icon="train" disabled></kor-switch-item>
<kor-switch-item icon="directions_car"></kor-switch-item>
<kor-switch-item icon="directions_bike" active></kor-switch-item>
</kor-switch>
</kor-accordion>
<!-- stepper -->
<kor-accordion label="Stepper">
<!-- horizontal -->
<kor-stepper>
<kor-stepper-item label="First" disabled></kor-stepper-item>
<kor-stepper-item label="Second"></kor-stepper-item>
<kor-stepper-item label="Active" active></kor-stepper-item>
</kor-stepper>
<kor-stepper>
<kor-stepper-item
label="Second"
info="Information text"
></kor-stepper-item>
<kor-stepper-item
label="Active"
info="Information text"
active
></kor-stepper-item>
</kor-stepper>
<kor-stepper>
<kor-stepper-item
label="First"
icon="train"
disabled
></kor-stepper-item>
<kor-stepper-item
label="Second"
icon="directions_car"
></kor-stepper-item>
<kor-stepper-item
label="Active"
icon="directions_bike"
active
></kor-stepper-item>
</kor-stepper>
<!-- vertical -->
<kor-stepper orientation="vertical">
<kor-stepper-item label="First" disabled></kor-stepper-item>
<kor-stepper-item label="Second"></kor-stepper-item>
<kor-stepper-item label="Active" active></kor-stepper-item>
</kor-stepper>
<kor-stepper orientation="vertical">
<kor-stepper-item
label="First"
info="Information text"
disabled
></kor-stepper-item>
<kor-stepper-item
label="Second"
info="Information text"
></kor-stepper-item>
<kor-stepper-item
label="Active"
info="Information text"
active
></kor-stepper-item>
</kor-stepper>
<kor-stepper orientation="vertical">
<kor-stepper-item
label="First"
icon="train"
disabled
></kor-stepper-item>
<kor-stepper-item
label="Second"
icon="directions_car"
></kor-stepper-item>
<kor-stepper-item
label="Active"
icon="directions_bike"
active
></kor-stepper-item>
</kor-stepper>
</kor-accordion>
<!-- breadcrumbs -->
<kor-accordion label="Breadcrumbs">
<kor-breadcrumbs>
<kor-breadcrumb-item label="First"></kor-breadcrumb-item>
<kor-breadcrumb-item label="Second"></kor-breadcrumb-item>
<kor-breadcrumb-item label="Active" active></kor-breadcrumb-item>
</kor-breadcrumbs>
</kor-accordion>
<!-- avatar -->
<kor-accordion label="Avatar">
<kor-avatar></kor-avatar>
<kor-avatar label="First Last"></kor-avatar>
<kor-avatar
label="First Middle Last"
info="Information text"
image="https://i1.wp.com/www.docker.com/blog/wp-content/uploads/2019/10/Renee-M.jpg?fit=753%2C1024&ssl=1"
></kor-avatar>
</kor-accordion>
<!-- inputs -->
<kor-accordion label="Input">
<!-- text -->
<kor-input condensed label="Text condensed empty"></kor-input>
<kor-input label="Text filled" value="Hi"></kor-input>
<kor-input label="Text icon" icon="text_format"></kor-input>
<kor-input label="Text icon">
<kor-icon button icon="text_format" slot="functions"></kor-icon>
</kor-input>
<!-- search -->
<kor-input label="Search" value="Hi" type="search"></kor-input>
<!-- number -->
<kor-input
condensed
label="Number condensed empty"
type="number"
></kor-input>
<kor-input
label="Number empty (min 50, max 100, step 10)"
type="number"
min="50"
max="100"
step="10"
></kor-input>
<kor-input
label="Number filled"
type="number"
value="150"
></kor-input>
<br />
<!-- date -->
<kor-input type="date"></kor-input>
<!-- select -->
<kor-input type="select" label="Select">
<kor-menu-item label="Option 1"></kor-menu-item>
<kor-menu-item label="Option 2"></kor-menu-item>
<kor-menu-item label="Option 3" active></kor-menu-item>
<kor-menu-item label="Option 4"></kor-menu-item>
<kor-menu-item label="Option 5"></kor-menu-item>
<kor-menu-item label="Option 6"></kor-menu-item>
<kor-menu-item label="Option 7"></kor-menu-item>
<kor-menu-item label="Option 8"></kor-menu-item>
<kor-menu-item label="Option 9"></kor-menu-item>
<kor-menu-item label="Option 10"></kor-menu-item>
<kor-menu-item label="Option 11"></kor-menu-item>
</kor-input>
<!-- status -->
<kor-input label="Status error" status="error"></kor-input>
<kor-input label="Status success" status="success"></kor-input>
<kor-input label="Status warning" status="warning"></kor-input>
<br />
<kor-input disabled label="Disabled" status="error"></kor-input>
<kor-input readonly label="Readonly" status="error"></kor-input>
</kor-accordion>
<!-- checkbox -->
<kor-accordion label="Checkbox">
<kor-checkbox></kor-checkbox>
<kor-checkbox label="With label"></kor-checkbox>
<kor-checkbox label="Active" active></kor-checkbox>
<kor-checkbox label="Disabled" disabled></kor-checkbox>
<kor-checkbox label="Active Disabled" active disabled></kor-checkbox>
</kor-accordion>
<!-- radio button -->
<kor-accordion label="Radio Button">
<kor-radio-button></kor-radio-button>
<kor-radio-button label="With label"></kor-radio-button>
<kor-radio-button label="Active" active></kor-radio-button>
<kor-radio-button label="Disabled" disabled></kor-radio-button>
<kor-radio-button
label="Active Disabled"
active
disabled
></kor-radio-button>
</kor-accordion>
<!-- checkbox -->
<kor-accordion label="Toggle">
<kor-toggle></kor-toggle>
<kor-toggle label="With label"></kor-toggle>
<kor-toggle label="Active" active></kor-toggle>
<kor-toggle label="Disabled" disabled></kor-toggle>
<kor-toggle label="Active Disabled" active disabled></kor-toggle>
</kor-accordion>
<!-- buttons -->
<kor-accordion label="Button">
<kor-button label="Primary"></kor-button>
<kor-button label="Secondary" color="secondary"></kor-button>
<kor-button label="Tertiary" color="tertiary"></kor-button>
<kor-button label="Primary" disabled></kor-button>
<kor-button label="Secondary" color="secondary" disabled></kor-button>
<kor-button label="Tertiary" color="tertiary" disabled></kor-button>
<kor-button icon="save"></kor-button>
<kor-button icon="save" color="secondary"></kor-button>
<kor-button icon="save" color="tertiary"></kor-button>
<kor-button icon="save" disabled></kor-button>
<kor-button icon="save" color="secondary" disabled></kor-button>
<kor-button icon="save" color="tertiary" disabled></kor-button>
</kor-accordion>
<!-- tool -->
<kor-accordion label="Tool">
<kor-tool label="Label ipsum amet"></kor-tool>
<kor-tool label="Label ipsum amet" toggle></kor-tool>
<kor-tool label="Label ipsum amet" active></kor-tool>
<kor-tool label="Label ipsum amet" disabled></kor-tool>
<kor-tool label="Label ipsum amet" size="s"></kor-tool>
<kor-tool label="Label ipsum amet" size="s" toggle></kor-tool>
<kor-tool label="Label ipsum amet" size="s" active></kor-tool>
<kor-tool label="Label ipsum amet" size="s" disabled></kor-tool>
<kor-tool icon="train"></kor-tool>
<kor-tool icon="train" toggle></kor-tool>
<kor-tool icon="train" active></kor-tool>
<kor-tool icon="train" disabled></kor-tool>
<kor-tool icon="train" size="s"></kor-tool>
<kor-tool icon="train" size="s" toggle></kor-tool>
<kor-tool icon="train" size="s" active></kor-tool>
<kor-tool icon="train" size="s" disabled></kor-tool>
<kor-tool label="Label ipsum amet" icon="train"></kor-tool>
<kor-tool label="Label ipsum amet" icon="train" toggle></kor-tool>
<kor-tool label="Label ipsum amet" icon="train" active></kor-tool>
<kor-tool label="Label ipsum amet" icon="train" disabled></kor-tool>
<kor-tool label="Label ipsum amet" size="s" icon="train"></kor-tool>
<kor-tool
label="Label ipsum amet"
size="s"
icon="train"
toggle
></kor-tool>
<kor-tool
label="Label ipsum amet"
size="s"
icon="train"
active
></kor-tool>
<kor-tool
label="Label ipsum amet"
size="s"
icon="train"
disabled
></kor-tool>
</kor-accordion>
<!-- icons -->
<kor-accordion label="Icon">
<kor-icon
icon="url('https://material.io/resources/icons/static/ic_icons_192px_light.svg')"
></kor-icon>
<kor-icon icon="save"></kor-icon>
<kor-icon icon="save" button></kor-icon>
<kor-icon icon="save" disabled></kor-icon>
<kor-icon icon="save" color="rgb(var(--accent-1))"></kor-icon>
<kor-icon icon="save" size="s"></kor-icon>
<kor-icon icon="save" size="l"></kor-icon>
<kor-icon icon="save" size="xl"></kor-icon>
</kor-accordion>
<!-- badge -->
<kor-accordion label="Badge">
<kor-badge></kor-badge>
<kor-badge label="1"></kor-badge>
<kor-badge label="13"></kor-badge>
<kor-badge label="130"></kor-badge>
<kor-badge label="1300"></kor-badge>
<kor-badge status="error"></kor-badge>
<kor-badge status="warning"></kor-badge>
<kor-badge status="success"></kor-badge>
</kor-accordion>
<!-- tag -->
<kor-accordion label="Tag">
<kor-tag label="With label"></kor-tag>
<kor-tag label="Button" button></kor-tag>
<kor-tag icon="train" label="With label, icon"></kor-tag>
<kor-tag icon="train" label="With label, icon" removable></kor-tag>
</kor-accordion>
<!-- progress bar -->
<kor-accordion label="Progress Bar">
<kor-progress-bar value="20"></kor-progress-bar>
<kor-progress-bar value="20" label="With label"></kor-progress-bar>
<kor-progress-bar
value="20"
label="Show progress"
show-progress
></kor-progress-bar>
<kor-progress-bar
value="20"
label="With info"
info="Slow connection detected"
></kor-progress-bar>
<kor-progress-bar
value="20"
label="With info, status"
status="warning"
info="Slow connection detected"
></kor-progress-bar>
<kor-progress-bar
value="20"
label="Color"
color="red"
></kor-progress-bar>
<br />
<kor-progress-bar radial value="20"></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="With label"
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="Show progress"
show-progress
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="With info"
info="Slow connection detected"
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="With info, status"
status="warning"
info="Slow connection detected"
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="Color"
color="red"
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="Size s"
size="s"
></kor-progress-bar>
<kor-progress-bar
radial
value="20"
label="Size l"
size="l"
></kor-progress-bar>
</kor-accordion>
<!-- spinner -->
<kor-accordion label="Spinner">
<kor-spinner></kor-spinner>
<kor-spinner label="Size m, with label"></kor-spinner>
<kor-spinner size="s"></kor-spinner>
<kor-spinner size="s" label="Size s, with label"></kor-spinner>
</kor-accordion>
<!-- menu item -->
<kor-accordion label="Menu Item">
<kor-menu-item
label="Idle toggle='false'"
toggle="false"
></kor-menu-item>
<kor-menu-item label="With icon" icon="save"></kor-menu-item>
<kor-menu-item label="Icon slot">
<kor-icon button icon="save" slot="functions"></kor-icon>
</kor-menu-item>
<kor-menu-item label="Active" active></kor-menu-item>
<kor-menu-item label="Disabled" disabled></kor-menu-item>
</kor-accordion>
<!-- popover -->
<kor-accordion label="Popover">
<!-- targets -->
<kor-icon
button
slot="footer"
icon="keyboard_arrow_up"
id="popover-tar-1"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_down"
id="popover-tar-2"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_left"
id="popover-tar-3"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_right"
id="popover-tar-4"
></kor-icon>
<!-- popovers -->
<kor-popover
target="#popover-tar-1"
position="top"
label="Top"
></kor-popover>
<kor-popover target="#popover-tar-2">
<kor-tabs slot="header">
<kor-tab-item label="Tab 1" active></kor-tab-item>
<kor-tab-item label="Tab 2"></kor-tab-item>
</kor-tabs>
<kor-icon button icon="save" slot="footer"></kor-icon>
</kor-popover>
<kor-popover target="#popover-tar-3" position="left" label="Left">
<kor-button label="Button" slot="footer"></kor-button>
</kor-popover>
<kor-popover target="#popover-tar-4" position="right" label="Right">
<kor-icon button icon="save" slot="footer"></kor-icon>
<kor-icon button icon="save" slot="footer"></kor-icon>
</kor-popover>
</kor-accordion>
<!-- popover -->
<kor-accordion label="Tooltip">
<!-- targets -->
<kor-icon
button
slot="footer"
icon="keyboard_arrow_up"
id="tooltip-tar-1"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_down"
id="tooltip-tar-2"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_left"
id="tooltip-tar-3"
></kor-icon>
<kor-icon
button
slot="footer"
icon="keyboard_arrow_right"
id="tooltip-tar-4"
></kor-icon>
<!-- popovers -->
<kor-tooltip
target="#tooltip-tar-1"
position="top"
label="Top"
></kor-tooltip>
<kor-tooltip target="#tooltip-tar-2">
<kor-tabs slot="header">
<kor-tab-item label="Tab 1" active></kor-tab-item>
<kor-tab-item label="Tab 2"></kor-tab-item>
</kor-tabs>
<kor-icon button icon="save" slot="footer"></kor-icon>
</kor-tooltip>
<kor-tooltip target="#tooltip-tar-3" position="left" label="Left">
<kor-button label="Button" slot="footer"></kor-button>
</kor-tooltip>
<kor-tooltip target="#tooltip-tar-4" position="right" label="Right">
<kor-icon button icon="save" slot="footer"></kor-icon>
<kor-icon button icon="save" slot="footer"></kor-icon>
</kor-tooltip>
</kor-accordion>
<!-- tabs -->
<kor-accordion label="Tabs">
<!-- horizontal -->
<kor-tabs>
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-tabs>
<kor-tab-item label="Active" icon="train" active></kor-tab-item>
<kor-tab-item label="Idle" icon="train"></kor-tab-item>
<kor-tab-item label="Disabled" icon="train" disabled></kor-tab-item>
</kor-tabs>
<kor-tabs>
<kor-tab-item icon="train" active></kor-tab-item>
<kor-tab-item icon="train"></kor-tab-item>
<kor-tab-item icon="train" disabled></kor-tab-item>
</kor-tabs>
<!-- vertical -->
<kor-tabs orientation="vertical">
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-tabs orientation="vertical">
<kor-tab-item label="Active" icon="train" active></kor-tab-item>
<kor-tab-item label="Idle" icon="train"></kor-tab-item>
<kor-tab-item label="Disabled" icon="train" disabled></kor-tab-item>
</kor-tabs>
<kor-tabs orientation="vertical">
<kor-tab-item icon="train" active></kor-tab-item>
<kor-tab-item icon="train"></kor-tab-item>
<kor-tab-item icon="train" disabled></kor-tab-item>
</kor-tabs>
</kor-accordion>
<!-- modal -->
<kor-accordion label="Modal">
<!-- targets -->
<kor-button
label="With label, icon"
onclick="document.querySelector('#modal').visible = true"
></kor-button>
<kor-button
label="With slots, sticky, size"
onclick="document.querySelector('#modal-2').visible = true"
></kor-button>
<!-- modals -->
<kor-modal label="My Modal" icon="email" id="modal">
<kor-input></kor-input>
<kor-input></kor-input>
</kor-modal>
<kor-modal height="400px" width="400px" sticky id="modal-2">
<kor-tabs slot="header">
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-icon button icon="save" slot="functions"></kor-icon>
<kor-button
slot="footer"
label="Close Modal"
onclick="event.target.parentElement.visible = false"
></kor-button>
</kor-modal>
</kor-accordion>
<!-- notifications -->
<kor-accordion label="Notifications">
<!-- targets -->
<kor-button
label="Top Left"
onclick="document.querySelector('#notification-1').visible = true"
></kor-button>
<kor-button
label="Top Right"
onclick="document.querySelector('#notification-2').visible = true"
></kor-button>
<kor-button
label="Bottom Left"
onclick="document.querySelector('#notification-3').visible = true"
></kor-button>
<kor-button
label="Bottom Right"
onclick="document.querySelector('#notification-4').visible = true"
></kor-button>
</kor-accordion>
<!-- drawer -->
<kor-accordion label="Drawer">
<!-- targets -->
<kor-button
label="Left with label, icon"
onclick="document.querySelector('#drawer-left').visible = true"
></kor-button>
<kor-button
label="Right, with slots, sticky"
onclick="document.querySelector('#drawer-right').visible = true"
></kor-button>
<kor-button
label="Top"
onclick="document.querySelector('#drawer-top').visible = true"
></kor-button>
<kor-button
label="Bottom"
onclick="document.querySelector('#drawer-bottom').visible = true"
></kor-button>
<!-- drawers -->
<kor-drawer
position="left"
label="Left Drawer"
icon="email"
id="drawer-left"
></kor-drawer>
<kor-drawer position="right" sticky id="drawer-right">
<kor-tabs slot="header">
<kor-tab-item label="Active" active></kor-tab-item>
<kor-tab-item label="Idle"></kor-tab-item>
<kor-tab-item label="Disabled" disabled></kor-tab-item>
</kor-tabs>
<kor-icon button icon="save" slot="functions"></kor-icon>
<kor-button
slot="footer"
label="Close Drawer"
onclick="event.target.parentElement.visible = false"
></kor-button>
</kor-drawer>
<kor-drawer
position="top"
label="Top Drawer"
id="drawer-top"
></kor-drawer>
<kor-drawer
position="bottom"
label="Top Drawer"
id="drawer-bottom"
></kor-drawer>
</kor-accordion>
<!-- text -->
<kor-accordion label="Text">
<kor-text>Body 1, Text 1</kor-text>
<kor-text size="body-1" color="var(--text-2)"
>Body 1, Text 2</kor-text
>
<kor-text size="body-1" color="var(--text-3)"
>Body 1, Text 3</kor-text
>
<kor-text size="body-2" color="var(--text-1)"
>Body 2, Text 1</kor-text
>
<kor-text size="body-2" color="var(--text-2)"
>Body 2, Text 2</kor-text
>
<kor-text size="body-2" color="var(--text-3)"
>Body 2, Text 3</kor-text
>
<kor-text size="header-1" color="var(--text-1)"
>Header 1, Text 1</kor-text
>
<kor-text size="header-1" color="var(--text-2)"
>Header 1, Text 2</kor-text
>
<kor-text size="header-1" color="var(--text-3)"
>Header 1, Text 3</kor-text
>
<kor-text size="header-2" color="var(--text-1)"
>Header 2, Text 1</kor-text
>
<kor-text size="header-2" color="var(--text-2)"
>Header 2, Text 2</kor-text
>
<kor-text size="header-2" color="var(--text-3)"
>Header 2, Text 3</kor-text
>
</kor-accordion>
<!-- text -->
<kor-accordion label="Divider">
Spacing s
<kor-divider spacing="s"></kor-divider>
Spacing m
<kor-divider spacing="m"></kor-divider>
Spacing l
<kor-divider spacing="l"></kor-divider>
<div style="display: flex; height: 48px">
S
<kor-divider spacing="s" orientation="vertical"></kor-divider>
M
<kor-divider spacing="m" orientation="vertical"></kor-divider>
L
<kor-divider spacing="l" orientation="vertical"></kor-divider>
</div>
</kor-accordion>
<!-- empty state -->
<kor-accordion label="Empty State">
<kor-empty-state
style="height: 160px"
label="With label"
></kor-empty-state>
<kor-empty-state
style="height: 160px"
label="With label, icon"
icon="train"
></kor-empty-state>
<kor-empty-state
style="height: 160px"
label="With label, icon, footer"
icon="train"
>
<kor-button label="Button" slot="footer"></kor-button>
</kor-empty-state>
</kor-accordion>
</kor-pane>
<kor-pane slot="right" icon="train" label="With label, icon, slots">
<kor-icon slot="functions" button icon="save"></kor-icon>
<!-- menu items -->
<kor-accordion label="Idle"></kor-accordion>
<kor-accordion
label="Expanded, Icon"
icon="message"
expanded
></kor-accordion>
<kor-accordion label="Disabled" disabled></kor-accordion>
<!-- buttons -->
<kor-button label="Button" slot="footer"></kor-button>
</kor-pane>
<!-- grid -->
<kor-grid rows="2">
<!-- cards -->
<kor-card
label="With label, icon, slots"
icon="extension"
grid-cols="6"
>
<kor-icon button slot="functions" icon="save"></kor-icon>
<kor-table columns="2fr 1fr 1fr">
<kor-table-row slot="header">
<kor-table-cell head sortable sorted sort-direction="desc"
>Sortable A</kor-table-cell
>
<kor-table-cell head sortable>Sortable B</kor-table-cell>
<kor-table-cell head sortable>Sortable C</kor-table-cell>
</kor-table-row>
<!-- swipe-actions -->
<kor-swipe-actions>
<kor-swipe-action
slot="left"
icon="delete"
bg-color="rgb(var(--functional-red))"
></kor-swipe-action>
<kor-table-row>
<kor-table-cell>Cell 1A</kor-table-cell>
<kor-table-cell>Cell 1B</kor-table-cell>
<kor-table-cell>Cell 1C</kor-table-cell>
</kor-table-row>
<kor-swipe-action
slot="right"
icon="reply"
bg-color="rgb(var(--functional-green))"
></kor-swipe-action>
</kor-swipe-actions>
<kor-swipe-actions>
<kor-swipe-action slot="left" icon="save"></kor-swipe-action>
<kor-table-row>
<kor-table-cell>Cell 1A</kor-table-cell>
<kor-table-cell>Cell 1B</kor-table-cell>
<kor-table-cell>Cell 1C</kor-table-cell>
</kor-table-row>
</kor-swipe-actions>
<kor-table-row>
<kor-table-cell>Cell 1A</kor-table-cell>
<kor-table-cell>Cell 1B</kor-table-cell>
<kor-table-cell>Cell 1C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 2A</kor-table-cell>
<kor-table-cell>Cell 2B</kor-table-cell>
<kor-table-cell>Cell 2C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 3A</kor-table-cell>
<kor-table-cell>Cell 3B</kor-table-cell>
<kor-table-cell>Cell 3C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 4A</kor-table-cell>
<kor-table-cell>Cell 4B</kor-table-cell>
<kor-table-cell>Cell 4C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 5A</kor-table-cell>
<kor-table-cell>Cell 5B</kor-table-cell>
<kor-table-cell>Cell 5C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 6A</kor-table-cell>
<kor-table-cell>Cell 6B</kor-table-cell>
<kor-table-cell>Cell 6C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 6A</kor-table-cell>
<kor-table-cell>Cell 6B</kor-table-cell>
<kor-table-cell>Cell 6C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 7A</kor-table-cell>
<kor-table-cell>Cell 7B</kor-table-cell>
<kor-table-cell>Cell 7C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 8A</kor-table-cell>
<kor-table-cell>Cell 8B</kor-table-cell>
<kor-table-cell>Cell 8C</kor-table-cell>
</kor-table-row>
<kor-table-row>
<kor-table-cell>Cell 9A</kor-table-cell>
<kor-table-cell>Cell 9B</kor-table-cell>
<kor-table-cell>Cell 9C</kor-table-cell>
</kor-table-row>
</kor-table>
<kor-button label="Button" disabled slot="footer"></kor-button>
</kor-card>
<kor-card grid-cols="6" grid-rows="2">
<kor-table readonly condensed>
<kor-table-row slot="header">
<kor-table-cell head grid-cols="8">Head A</kor-table-cell>
<kor-table-cell head grid-cols="8" alignment="center"
>Head B</kor-table-cell
>
<kor-table-cell head grid-cols="8" alignment="right"
>Head C</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
<kor-table-row>
<kor-table-cell grid-cols="8">Cond. left</kor-table-cell>
<kor-table-cell grid-cols="8" alignment="center"
>Cond. center</kor-table-cell
>
<kor-table-cell grid-cols="8" alignment="right"
>Cond. right</kor-table-cell
>
</kor-table-row>
</kor-table>
</kor-card>
<kor-card grid-cols="2"></kor-card>
<kor-card
grid-cols="4"
label="Image Card"
icon="image"
image="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"
></kor-card>
</kor-grid>
<!-- notifications -->
<kor-notifications position="top-left">
<kor-notification-item
label="Top left with icon"
icon="directions_car"
id="notification-1"
></kor-notification-item>
</kor-notifications>
<kor-notifications position="top-right">
<kor-notification-item
id="notification-2"
label="Top right, sticky with slots"
sticky
>
<kor-icon button slot="functions" icon="save"></kor-icon>
This is the notification with content.
<kor-button
label="Button"
slot="footer"
onclick="event.target.parentElement.visible = false"
></kor-button>
</kor-notification-item>
</kor-notifications>
<kor-notifications position="bottom-left">
<kor-notification-item
label="Bottom left"
id="notification-3"
></kor-notification-item>
</kor-notifications>
<kor-notifications position="bottom-right">
<kor-notification-item
label="Bottom right"
id="notification-4"
></kor-notification-item>
</kor-notifications>
</kor-page>
</body>
</html>