- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Popover
Component status | Verified |
---|---|
Last released | Unreleased |
Current version | @spectrum-css/popover@3.0.3-alpha.1 |
Variants
StandardContribution
- Ballard
- Fremont
- Greenwood
- United States of America
Show markup
<div class="spectrum-Popover is-open">
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Ballard</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Fremont</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Greenwood</span>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">United States of America</span>
</li>
</ul>
</div>
<div class="dummy-spacing"></div>
Popover - Dialog styleContribution
Spectrum Popovers are implemented using the Dialog’s inner elements.
Popover Title
Very Very Very Very Long Popover Title
Very Very Very Very Long Popover Title
Show markup
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Popover--withTip is-open spectrum-Popover" role="presentation">
<section class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid" style="display: grid;">
<h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Popover Title</h1>
<hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
<section class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</section>
</div>
</section>
<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" style="left: 201px;">
<path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0"></path>
</svg>
</div>
<div class="dummy-spacing" style="height: 240px"></div>
<br>
<br>
<div class="spectrum-Popover spectrum-Popover--right spectrum-Popover--withTip is-open spectrum-Popover" role="presentation">
<section class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid" style="display: grid;">
<h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Very Very Very Very Long Popover Title</h1>
<hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
<section class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</section>
</div>
</section>
<svg xmlns="http://www.w3.org/svg/2000" width="12" height="23" class="spectrum-Popover-tip" style="top: 16px;">
<path class="spectrum-Popover-tip-triangle" d="M 0 0.7071067811865476 L 10.707106781186548 11.414213562373096 L 0 22.121320343559645"></path>
</svg>
</div>
<div class="dummy-spacing" style="height: 240px"></div>
<br>
<br>
<div class="spectrum-Popover spectrum-Popover--left spectrum-Popover--withTip is-open spectrum-Popover" role="presentation">
<section class="spectrum-Dialog spectrum-Dialog--small spectrum-Dialog--error" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid" style="display: grid;">
<h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Very Very Very Very Long Popover Title</h1>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Alert"></use>
</svg>
<hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
<section class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</section>
<div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-Button--quiet spectrum-ButtonGroup-item" type="button">
<span class="spectrum-Button-label">Cancel</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-Button--quiet spectrum-ButtonGroup-item" type="button">
<span class="spectrum-Button-label">Save</span>
</button>
</div>
</div>
</section>
<svg xmlns="http://www.w3.org/svg/2000" width="12" height="23" class="spectrum-Popover-tip" style="top: 16px;">
<path class="spectrum-Popover-tip-triangle" d="M 0 0.7071067811865476 L 10.707106781186548 11.414213562373096 L 0 22.121320343559645"></path>
</svg>
</div>
<div class="dummy-spacing" style="height: 320px"></div>