material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
85 lines (83 loc) • 4.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Demonstrating MICL Navigation Rails">
<title>MICL Navigation Rail</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,delete,favorite,home,inbox,menu,menu_open,outbox&display=block">
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
<link rel="stylesheet" href="micl.css">
<link rel="stylesheet" href="docs.css">
<style>
.micl-card-filled {
height: 420px;
width: 360px;
}
</style>
</head>
<body class="micl-window light">
<dialog id="mynavigationrail1" class="micl-navigationrail" closedby="closerequest">
<!-- <nav id="mynavigationrail1" class="micl-navigationrail" popover="manual"> -->
<div class="micl-navigationrail__headline">
<button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" command="close" commandfor="mynavigationrail1" data-miclalt="menu_open" aria-label="Toggle navigation rail">menu</button>
</div>
<div class="micl-navigationrail__content">
<input type="radio" id="item1" name="navitem" value="email_inbox" checked>
<label for="item1" class="micl-navigationrail__item" tabindex="0">
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
<span class="micl-navigationrail__text">Inbox</span>
<span class="micl-badge" style="position-anchor:--inbox">97</span>
</label>
<input type="radio" id="item2" name="navitem" value="email_outbox">
<label for="item2" class="micl-navigationrail__item" tabindex="0">
<span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
<span class="micl-navigationrail__text">Outbox</span>
</label>
<input type="radio" id="item3" name="navitem" value="email_favorites">
<label for="item3" class="micl-navigationrail__item" tabindex="0">
<span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
<span class="micl-navigationrail__text">Favorites</span>
<span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
</label>
<input type="radio" id="item4" name="navitem" value="email_trash">
<label for="item4" class="micl-navigationrail__item" tabindex="0">
<span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
<span class="micl-navigationrail__text">Trash</span>
</label>
</div>
<!-- </nav> -->
</dialog>
<main class="micl-body">
<section class="micl-pane">
<header class="micl-appbar micl-appbar--large">
<button type="button" class="micl-iconbutton-standard-m micl-button--toggle material-symbols-outlined" style="margin:8px 0 0 8px" command="show-modal" commandfor="mynavigationrail1" aria-label="Toggle navigation rail">menu</button>
<div class="micl-appbar__headline">
<h1>Navigation rails</h1>
<p class="micl-appbar__subtitle">Showcasing MICL navigation rails</p>
</div>
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
</header>
<div style="display:flex;flex-wrap:wrap">
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
<div class="micl-card-filled"></div>
</div>
</section>
</main>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>