mirror of
https://github.com/primer/css.git
synced 2024-12-23 22:24:11 +03:00
59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
|
---
|
||
|
|
title: Dialog
|
||
|
|
path: components/dialog
|
||
|
|
status: Alpha
|
||
|
|
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/experiments/modal-dialog.scss'
|
||
|
|
bundle: dialog
|
||
|
|
---
|
||
|
|
|
||
|
|
Please note that the `<div>` element with `id="fake-container"` is not included in the component.
|
||
|
|
|
||
|
|
```html live
|
||
|
|
<div id="fake-container" style="height: 400px;">
|
||
|
|
<button class="btn"><span>Open dialog</span></button>
|
||
|
|
<div
|
||
|
|
id="overlay-backdrop"
|
||
|
|
class="Overlay-backdrop Overlay-backdrop--center"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="title-id"
|
||
|
|
aria-describedby="description-id"
|
||
|
|
data-focus-trap="active"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="Overlay Overlay--width-medium Overlay--height-medium Overlay--motion-scaleFade"
|
||
|
|
data-focus-trap="active"
|
||
|
|
open=""
|
||
|
|
>
|
||
|
|
<header class="Overlay-header">
|
||
|
|
<div class="Overlay-headerContentWrap">
|
||
|
|
<div class="Overlay-titleWrap">
|
||
|
|
<h1 id="title-id" class="Overlay-title">This is the title of the dialog</h1>
|
||
|
|
<h2 id="description-id" class="Overlay-description">This is the subtitle of the dialog</h2>
|
||
|
|
</div>
|
||
|
|
<div class="Overlay-actionWrap">
|
||
|
|
<button class="Overlay-closeButton" aria-label="Close">
|
||
|
|
<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="Overlay-body">
|
||
|
|
This is the body of the dialogThis is the body of the dialogThis is the body of the dialog This is the body of
|
||
|
|
the dialog This is the body of the dialog This is the body of the dialog This is the body of the dialog This is
|
||
|
|
the body of the dialog This is the body of the dialog
|
||
|
|
</div>
|
||
|
|
<footer class="Overlay-footer Overlay-footer--divided Overlay-footer--alignEnd">
|
||
|
|
<button class="btn"><span>Continue</span></button>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|