@maksimyurkov/ims-user-list
Version:
User List web component for WebTutor and other LMS
62 lines (59 loc) • 2.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ims-user-list style demo</title>
<style>
body {
margin: 0;
font-family: Roboto, sans-serif;
color: #424242;
font-size: 1rem;
padding: 32px 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background: #303030;
}
ims-user-list {
max-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<script src="../dist/vendor/webcomponents-loader.js"></script>
<script nomodule src="../dist/vendor/fetch.js"></script>
<script nomodule src="../dist/vendor/babel-helpers.min.js"></script>
<script nomodule src="../dist/vendor/regenerator-runtime.min.js"></script>
<ims-user-list></ims-user-list>
<script>
document.querySelector("ims-user-list").options = {
textAvatar: false,
customCSSProperties: {
"--ims-user-list-accent-color": "#3ea6ff",
"--ims-user-list-second-accent-color": "#fff",
"--ims-user-list-primary-text-color": "rgba(255, 255, 255, 1)",
"--ims-user-list-secondary-text-color": "rgba(255, 255, 255, 0.7)",
"--ims-user-list-grid-background": "#424242",
"--ims-user-list-grid-item-background": "#212121",
"--ims-user-list-grid-item-box-shadow":
"0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08)",
"--ims-user-list-avatar-border-radius": "none",
"--ims-user-list-grid-item-border": "none",
"--ims-user-list-grid-item-ripple-color": "#3ea6ff",
"--ims-user-list-grid-loading-background": "#303030",
"--ims-user-list-search-background": "#424242",
"--ims-user-list-dialog-background": "#303030",
"--ims-user-list-link-color": "#3ea6ff",
"--ims-user-list-dialog-user-info-tooltip-background": "#909090",
"--ims-user-list-dialog-user-info-tooltip-text-color": "#ffffff"
},
demoMode: true
};
</script>
<script nomodule src="../dist/ims-user-list.es5.js"></script>
<script type="module" src="../dist/ims-user-list.js"></script>
</body>
</html>