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.
199 lines (192 loc) • 14.2 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 Dialogs">
<title>MICL Dialogs</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,home,person,restart_alt&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>
label {
color: var(--md-sys-color-on-surface);
}
</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>Dialogs</h1>
<p class="micl-appbar__subtitle">Showcasing MICL dialogs</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 dialogs.</p>
<div class="micl-card__content docs-buttons">
<dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle1">
<div class="micl-dialog__headline">
<h2 id="mytitle1">Basic dialog</h2>
<span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
</div>
<div class="micl-dialog__actions">
<button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
<button type="button" class="micl-button-text-s">Action</button>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
<dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle2">
<div class="micl-dialog__headline">
<span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">restart_alt</span>
<h2 id="mytitle2">Reset settings?</h2>
<span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
</div>
<div class="micl-dialog__content">
<hr class="micl-divider">
<ul class="micl-list" style="--md-sys-list-item-container-color:transparent;margin-block:8px">
<li class="micl-list-item-one">
<span class="micl-list-item__avatar">JH</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
</span>
</li>
<li class="micl-list-item-one">
<span class="micl-list-item__avatar">LS</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">laura.smith@outlook.com</span>
</span>
</li>
<li class="micl-list-item-one">
<span class="micl-list-item__avatar">LH</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">lucy.hong@gmail.com</span>
</span>
</li>
</ul>
<hr class="micl-divider">
</div>
<div class="micl-dialog__actions">
<button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
<button type="button" class="micl-button-text-s">Accept</button>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
<dialog id="mydialog3" class="micl-dialog" style="width:350px" role="alertdialog" closedby="closerequest" aria-labelledby="mytitle3">
<div class="micl-dialog__headline">
<h2 id="mytitle3">Delete selected images?</h2>
<span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
</div>
<form method="dialog" class="micl-dialog__actions">
<button class="micl-button-text-s" value="donotdelete">Cancel</button>
<button class="micl-button-text-s" value="dodelete">Delete</button>
</form>
</dialog>
<button type="button" class="micl-button-outlined-m micl-button--square" commandfor="mydialog3" command="show-modal">Open Modal Dialog</button>
<dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover role="alertdialog" closedby="closerequest" aria-labelledby="mytitle4">
<div class="micl-dialog__headline">
<h2 id="mytitle4">Delete selected images?</h2>
<span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
</div>
<div class="micl-dialog__actions">
<button class="micl-button-text-s" value="donotdelete" popovertarget="mydialog4">Cancel</button>
<button class="micl-button-text-s" value="dodelete">Delete</button>
</div>
</dialog>
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
<dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" popover closedby="none" aria-labelledby="mytitle5">
<form method="dialog" class="micl-dialog__headline">
<button type="button" class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog5" aria-label="Close">close</button>
<span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
<h2 id="mytitle5">Personal info</h2>
<button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
</form>
<div class="micl-dialog__content">
<p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
<div class="micl-textfield-outlined" style="margin-block:24px">
<label for="mytextfield1">Name</label>
<input type="text" id="mytextfield1" value="Marie Curie">
</div>
<div class="micl-textfield-outlined" style="margin-block:24px">
<label for="mytextfield2">Address</label>
<input type="text" id="mytextfield2" value="Rue du Boulevard 3, Paris">
</div>
<div class="micl-textfield-outlined">
<label for="myselect">Country</label>
<select id="myselect">
<option class="micl-list-item-one" value="AR">
<span class="micl-list-item__text">Argentina</span>
</option>
<option class="micl-list-item-one" value="BO">
<span class="micl-list-item__text">Bolivia</span>
</option>
<option class="micl-list-item-one" value="BR">
<span class="micl-list-item__text">Brazil</span>
</option>
<option class="micl-list-item-one" value="CL" disabled>
<span class="micl-list-item__text">Chile</span>
</option>
<option class="micl-list-item-one" value="CO">
<span class="micl-list-item__text">Colombia</span>
</option>
<option class="micl-list-item-one" value="FR" selected>
<span class="micl-list-item__text">France</span>
</option>
</select>
</div>
<div class="micl-textfield-outlined" style="margin-block:24px 4px">
<label for="mytextfield5">Profession</label>
<input type="text" id="mytextfield5" value="Physics researcher">
</div>
</div>
<form method="dialog" class="micl-dialog__actions">
<button type="button" class="micl-button-text-s" popovertarget="mydialog5">Cancel</button>
<button class="micl-button-text-s" value="dosave">Save</button>
</form>
</dialog>
<button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog5">Open Full-Screen Dialog</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-dialog" style="width:300px" role="alertdialog" closedby="any" popover>
<div class="micl-dialog__headline">
<h2>Basic dialog</h2>
<span class="micl-dialog__supporting-text">A dialog is a type of modal window.</span>
</div>
<div class="micl-dialog__actions">
<button type="button" class="micl-button-text-s" popovertarget="id0">Cancel</button>
<button type="button" class="micl-button-text-s">Action</button>
</div>
</dialog>
</code></pre>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>