Editor
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
1 of 1
target
- React prop
target- Type
string- Default
""- Description
- ID of the target element this component controls or reads from.
CSS Parts
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
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
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. |