Class names and data attributes
Stable eg-* classes and state attributes to select on.
Adding your own classes
classNames adds classes next to the built-in ones, part by part. className and style go on the root.
<Lightbox
className="my-lightbox"
classNames={{ caption: "prose prose-invert", thumbnail: "rounded-full" }}
{...props}
/>Prop
Type
Built-in classes
Every part has a stable class you can target from your own CSS:
| Class | Part |
|---|---|
eg-root | The dialog |
eg-backdrop | The background |
eg-stage | The area that holds slides and receives swipes |
eg-slide | Each mounted slide |
eg-zoom, eg-rotate | Wrappers that carry the zoom and rotation |
eg-image, eg-video, eg-embed, eg-embed-poster | Media |
eg-error | The message shown when an image fails |
eg-top-bar, eg-counter, eg-toolbar | The top bar and its contents |
eg-button | Every built-in button |
eg-arrow, eg-arrow-prev, eg-arrow-next | The arrows |
eg-caption, eg-caption-title, eg-caption-description | The caption |
eg-slide-caption | The box over each media with captionPosition="slide" |
eg-thumbnails, eg-thumbnails-track, eg-thumbnails-item | The thumbnail strip |
eg-thumbnail, eg-thumbnail-image | Each thumbnail button and its image |
eg-progress | The slideshow progress bar |
eg-more, eg-menu, eg-menu-item, eg-menu-scrim | The overflow menu button, menu, items and backdrop |
eg-pager, eg-pager-dot | The pager dots |
eg-icon | Every icon drawn with Icon |
eg-sr-only | Text for screen readers only |
Data attributes
State is exposed as attributes:
| Attribute | On | Values |
|---|---|---|
data-state | .eg-root | opening, open, closing |
data-transition | .eg-root | slide, fade, zoom |
data-dragging | .eg-root | horizontal, vertical, only while dragging |
data-zoomed | .eg-root | present while the image is magnified |
data-thumbnails | .eg-root | present when the strip is shown |
data-playing | .eg-root | present while the slideshow plays |
data-pager | .eg-root | present when the pager dots are shown |
data-idle | .eg-root | present while idle controls are hidden |
data-menu | .eg-root | present while the overflow menu is open |
dir | .eg-root | ltr, rtl |
data-current | .eg-slide | present on the visible slide |
data-status | .eg-slide | loading, loaded, error, built-in images only |
data-gesture | .eg-zoom | present while a pinch, pan or wheel zoom follows the pointer |
.eg-root[data-zoomed] .eg-caption {
opacity: 0;
}
.eg-slide[data-status="error"] {
background: repeating-linear-gradient(45deg, #111 0 8px, #181818 8px 16px);
}Opting out of gestures
Add data-eg-no-gestures to any element inside a slide, and drags that start inside it are left alone. It is meant for custom controls in render overrides.