Overlay
Overlay components codify design patterns related to floating surfaces such as dialogs and menus.
On this page
Description
Overlay components codify design patterns related to floating surfaces such as dialogs and menus. They are private components intended to be used by specialized components, and mostly contain presentational logic and behavior.
Accessibility
- Overlay Accessible Name: An overlay should have an accessible name,
so screen readers are aware of the purpose of the Overlay when it opens.
Give an accessible name setting
:title
. The accessible name will be used as the main heading inside the Overlay. - Overlay unique id: A Overlay should be unique. Give a unique id
setting
:id
. If no:id
is given, a default randomize hex id is generated.
The combination of both :title
and :id
establishes an
aria-labelledby
relationship between the title and the unique id
of the Overlay.
Arguments
Name | Type | Default | Description |
---|---|---|---|
id | String |
| The id of the Overlay. |
title | String | N/A | Describes the content of the Overlay. |
subtitle | String |
| Provides dditional context for the Overlay, also setting the |
popover | Symbol |
| The popover behaviour. One of |
size | Symbol |
| The size of the Overlay. One of |
padding | Symbol |
| The padding given to the Overlay body. One of |
anchor | String |
| An ID of the element to anchor onto. Defaults to the |
anchor_align | Symbol |
| The anchor alignment of the Overlay. One of |
anchor_side | Symbol |
| The side to anchor the Overlay to. One of |
anchor_offset | Symbol |
| The anchor offset to give the Overlay. One of |
allow_out_of_bounds | Boolean |
| Allow the Overlay to overflow its container. |
visually_hide_title | Boolean |
| If true will hide the heading title, while still making it available to Screen Readers. |
role | String |
| The ARIA role. One of |
system_arguments | Hash | N/A |
Examples
Slots
show_button
Optional button to open the Overlay.
Name | Type | Default | Description |
---|---|---|---|
icon | String | N/A | Name of Octicons to use instead of text. If provided, a IconButton will be rendered. Otherwise a Button will be rendered. |
controls | String | N/A | The ID of the menu this button controls. Used internally. |
button_arguments | Hash | N/A | The arguments accepted by Button or IconButton depending on the presence of the |
header
Header content.
Name | Type | Default | Description |
---|---|---|---|
divider | Boolean | N/A | Show a divider between the header and body. |
size | Symbol | N/A | One of One of |
visually_hide_title | Boolean | N/A | Visually hide the |
system_arguments | Hash | N/A |
body
Required body content.
Name | Type | Default | Description |
---|---|---|---|
padding | Symbol | N/A | The padding. One of |
system_arguments | Hash | N/A |
footer
Footer content.
Name | Type | Default | Description |
---|---|---|---|
show_divider | Boolean | N/A | Show a divider between the footer and body. |
system_arguments | Hash | N/A |
Overlay::Header
A Overlay::Header
is a compositional component, used to render the
Header of an overlay. See Overlay.
Arguments
Name | Type | Default | Description |
---|---|---|---|
title | String | N/A | Describes the content of the Overlay. |
subtitle | String |
| Provides additional context for the Overlay, also setting the |
overlay_id | String |
| Provides the id of the overlay element so the close button can close it |
size | Symbol |
| The size of the Header. One of |
divider | Boolean |
| Show a divider between the header and body. |
visually_hide_title | Boolean |
| Visually hide the |
system_arguments | Hash | N/A |
Slots
filter
Optional filter slot for adding a filter input to the header.
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A |
subtitle
Optional subtitle slot for adding a subtitle to the header.
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A |
Overlay::Footer
A Overlay::Footer
is a compositional component, used to render the
Footer of an overlay. See Overlay.
Arguments
Name | Type | Default | Description |
---|---|---|---|
show_divider | Boolean |
| Show a divider between the footer and body. |
align_content | Symbol |
| The alginment of contents. One of |
system_arguments | Hash | N/A |
Overlay::Body
A Overlay::Body
is a compositional component, used to render the
Body of an overlay. See Overlay.
Arguments
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A |