ef-resolution
This element is a resolution picker for the inline CSS width and height styles of a target element.
This element is a resolution picker for the inline CSS width and height styles of a target element.
Attributes
| Attribute | React prop | Type | Default | Description |
|---|---|---|---|---|
target | target | string | "" | ID of the target element this component controls or reads from. |
CSS Parts
| Part | Description |
|---|---|
height-input | The custom height number input. This part appears only in custom mode. |
select | The dropdown list of preset resolutions. |
separator | The "×" symbol between the width and height inputs. |
width-input | The custom width number input. This part appears only in custom mode. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--ef-color-surface | rgba(0, 0, 0, 0.6) | Fallback background color source for `--ef-resolution-bg` (not currently part of the shared theme token set). |
--ef-resolution-bg | var(--ef-color-surface, rgba(0, 0, 0, 0.6)) | Background color of the dropdown/inputs. |
--ef-resolution-border-color | var(--ef-color-border, rgba(255, 255, 255, 0.2)) | Border color of the dropdown/inputs. |
--ef-resolution-color | var(--ef-color-text, #fff) | Text color. |
--ef-resolution-font-size | 12px | Font size of the dropdown/inputs. |
Events
| Event | Detail | Description |
|---|---|---|
resolution-change | { width: number; height: number } | Fires with a `{ width, height }` detail when the resolution changes. The change can come from a preset choice or a custom width and height input. |