egroupware_official/lit/index.html
Ralf Becker d11cb4bb7e Adding carbon lit components tutorial
https://github.com/carbon-design-system/carbon-web-components#basic-usage
Thought Rollup gives following Babel error:
Error: Could not load /Volumes/htdocs/egw-test/node_modules/carbon-web-components/es/components/dropdown/@babel/runtime/helpers/esm/decorate.js (imported by node_modules/carbon-web-components/es/components/dropdown/dropdown-item.js): ENOENT: no such file or directory, open '/Volumes/htdocs/egw-test/node_modules/carbon-web-components/es/components/dropdown/@babel/runtime/helpers/esm/decorate.js'
2021-07-09 20:16:24 +02:00

48 lines
1.2 KiB
HTML

<!--
@license
Copyright IBM Corp. 2019
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<html>
<head>
<title>carbon-web-components example</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
#app {
width: 300px;
}
bx-dropdown,
bx-dropdown-item {
visibility: hidden;
}
bx-dropdown:defined,
bx-dropdown-item:defined {
visibility: inherit;
}
</style>
</head>
<body>
<h1>Hello World! 👋</h1>
<div id="app">
<bx-dropdown trigger-content="Select an item">
<bx-dropdown-item value="all">Option 1</bx-dropdown-item>
<bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
<bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
<bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
<bx-dropdown-item value="router">Option 5</bx-dropdown-item>
</bx-dropdown>
</div>
<script type="module" src="js/app.min.js"></script>
</body>
</html>