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