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.
163 lines (158 loc) • 8.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MICL Bottom Sheets</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,link,share&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__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-block: 32px;
row-gap: 32px;
}
.figures {
display: flex;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
margin-inline: 0 32px;
margin-block: 0 32px;
}
h3, figcaption {
color: var(--md-sys-color-on-surface);
}
img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
.micl-list {
--md-sys-list-item-container-color: var(--md-sys-color-surface-container-low);
}
</style>
</head>
<body class="light">
<div class="headline">
<h1 class="md-sys-typescale-emphasized-display-small">Bottom sheets</h1>
<div id="settings-placeholder"></div>
</div>
<div class="cards">
<div class="micl-card-filled">
<div class="micl-card__content">
<dialog id="mybottomsheet1" class="micl-bottomsheet" closedby="any" 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-filled-m" popovertarget="mybottomsheet1">Open Sheet</button>
<dialog id="mybottomsheet2" class="micl-bottomsheet" closedby="any" popover data-snapheights="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-filled-m" popovertarget="mybottomsheet2">Open Resizable Sheet</button>
<dialog id="mybottomsheet3" 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>
</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-filled-m" popovertarget="mybottomsheet3">Open Modal Sheet</button>
</div>
</div>
</div>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>