Get started with mdui CDN

MIT licensed

MDUi is a lightweight and customizable Material Design UI library for JS.

Tags:
  • material design
  • web components
  • framework
  • front-end
  • web

Stable version

Copied!

How to start using mdui CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.cdnhub.io/mdui/2.0.6/css/mdui.min.css">
    <script defer src="https://cdn.cdnhub.io/mdui/2.0.6/js/mdui.min.js"></script>
</head>
<body>
    <div id="main" class="mdui-container mdui-theme-grey-background">
        <button class="mdui-btn mdui-btn-raised mdui-color-accent-4" id="my-button">Click me</button>
        <div id="dialog" class="mdui-dialog" mdui-dialog>
            <div class="mdui-dialog-title">Dialog Title</div>
            <div class="mdui-dialog-content">
                <p>This is a dialog message.</p>
            </div>
            <div class="mdui-dialog-actions">
                <button type="button" class="mdui-btn mdui-btn-flat mdui-color-text-secondary" mdui-dialog-close>Close</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            mdui.init();
            var button = document.getElementById('my-button');
            button.addEventListener('click', function() {
                mdui.dialog.open('#dialog');
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions