Popover
Rich, non-modal content anchored to a trigger, on the native Popover API.
Dimensions
Dimensions
Set the layer size.
<button class="mn-btn mn-btn-outline" popovertarget="pop-dim">Dimensions</button>
<div class="mn-popover" popover id="pop-dim" data-placement="bottom">
<p class="mn-popover-title">Dimensions</p>
<p class="mn-muted" style="margin:0 0 .75rem">Set the layer size.</p>
<div class="mn-form-row" style="grid-template-columns:1fr 1fr">
<div class="mn-field"><label class="mn-label" for="pw">Width</label><input class="mn-input mn-input-sm" id="pw" value="100%"></div>
<div class="mn-field"><label class="mn-label" for="ph">Height</label><input class="mn-input mn-input-sm" id="ph" value="25px"></div>
</div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/popover.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-popover + popover | The panel. Point popovertarget at it. |
| data-placement | bottom (default), top, left, right, with -start or -end. |
| mn-popover-title | Heading. |
Accessibility
- The browser handles Escape, light dismiss and aria-expanded on the invoker. Use a Modal instead if the content must be completed.