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.
245 lines (239 loc) • 14.5 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 Bottom Sheets">
<title>MICL Bottom Sheets</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=close,dark_mode,edit,home,link,pause,share,skip_next&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>
.figures {
display: flex;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
margin-inline: 0 32px;
margin-block: 0 32px;
}
h3, figcaption, p > span {
color: var(--md-sys-color-on-surface);
}
img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.player {
display: flex;
align-items: center;
column-gap: 16px;
padding-block-start: 24px;
}
.cover {
border-radius: 0;
}
.actions {
display: flex;
column-gap: 16px;
}
p {
display: flex;
flex: 1 1 100%;
flex-direction: column;
}
.micl-list {
--md-sys-list-item-container-color: var(--md-sys-color-surface-container-low);
}
</style>
</head>
<body class="micl-window light">
<main class="micl-body">
<section class="micl-pane">
<header class="micl-appbar">
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
<span class="material-symbols-outlined" aria-hidden="true">home</span>
</a>
<div class="micl-appbar__headline micl-appbar__headline--center">
<h1>Bottom sheets</h1>
<p class="micl-appbar__subtitle">Showcasing MICL bottom sheets</p>
</div>
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
</header>
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
<div class="micl-pane__column">
<div class="micl-card-filled">
<div class="micl-card__headline-s">
<h2>Showcase</h2>
</div>
<p class="micl-card__supporting-text">Click a button to open one of the MICL bottom sheets.</p>
<div class="micl-card__content docs-buttons">
<dialog id="mybottomsheet1" class="micl-bottomsheet" popover>
<div class="micl-bottomsheet__content">
<h3 class="md-sys-typescale-title-large">Send</h3>
<div class="figures">
<figure>
<img alt="John" src="card-names.webp">
<figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
</figure>
<figure>
<img alt="Carol" src="card-awards.webp">
<figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
</figure>
<figure>
<img alt="Bill" src="card-fingerprint.webp">
<figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
</figure>
<figure>
<img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
<figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
</figure>
</div>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet1">Open Sheet</button>
<dialog id="mybottomsheet2" class="micl-bottomsheet" popover="manual">
<div class="micl-bottomsheet__content">
<div class="player">
<img alt="City Album" src="card-city.webp" class="cover">
<p>
<span class="md-sys-typescale-body-large">City Sleepers</span>
<span class="md-sys-typescale-body-small">Various artists</span>
</p>
<div class="actions">
<span class="material-symbols-outlined micl-list-item__icon">pause</span>
<span class="material-symbols-outlined micl-list-item__icon">skip_next</span>
</div>
</div>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet2">Open Co-Existing Sheet</button>
<dialog id="mybottomsheet3" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
<div class="micl-bottomsheet__headline">
<button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
</div>
<div class="micl-bottomsheet__content">
<ul class="micl-list" role="listbox">
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">share</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Share</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">link</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Get link</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">edit</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Edit name</span>
</span>
</li>
</ul>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet3">Open Resizable Sheet</button>
<dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="closerequest">
<div class="micl-bottomsheet__headline">
<button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
</div>
<div class="micl-bottomsheet__content">
<ul class="micl-list" role="listbox" style="display:flex">
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">share</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Share</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">link</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Get link</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">edit</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Edit name</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" command="close" commandfor="mybottomsheet4">close</button>
</li>
</ul>
<hr class="micl-divider">
<h3 class="md-sys-typescale-title-large">Send</h3>
<div class="figures">
<figure>
<img alt="John" src="card-names.webp">
<figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
</figure>
<figure>
<img alt="Carol" src="card-awards.webp">
<figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
</figure>
<figure>
<img alt="Bill" src="card-fingerprint.webp">
<figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
</figure>
<figure>
<img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
<figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
</figure>
</div>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m" command="show-modal" commandfor="mybottomsheet4">Open Modal Sheet</button>
</div>
</div>
</div>
<div class="micl-pane__column">
<div class="micl-card-filled">
<div class="micl-card__headline-s">
<h2>Code example</h2>
</div>
<div class="micl-card__content docs-code">
<pre tabindex="-1"><code>
<dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
<div class="micl-bottomsheet__headline">
<button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
</div>
<div class="micl-bottomsheet__content">
<ul class="micl-list" role="listbox">
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">share</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Share</span>
</span>
</li>
<li class="micl-list-item-one" tabindex="0">
<span class="material-symbols-outlined micl-list-item__icon">edit</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Edit name</span>
</span>
</li>
</ul>
</div>
</dialog>
</code></pre>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>