Because the Etch CSS panel cannot (should not) process dynamic data, you can’t use data keys directly in the CSS panel, but you can still style based on those properties using a few different approaches, each with its own advantages.
Data attributes
Data attributes give you a clean way to connect meaning (state) to styling without overloading your class names. In Etch components, data attributes are typically set using booleans or selects.
HTML
data-block-padding={props.useDiffBPad}CSS
&[data-block-padding='true'] {
padding-block: var(--padding-block-start, var(--padding-block)) var(--padding-block-end, var(--padding-block));
}Inline style variables
Best used when you need to access the value directly.
HTML
In the HTML, you place the variable followed by the data prop
style="--bg-position: {props.bgPosition}"CSS
In the CSS, assign the value to a property. When using a variable, it is often a good idea to specify a fallback value (–my-variable, fallback value).
.my-class {
background-position: var(--bg-position, 50% 50%);
}Inline styles
Used for quick styling, but should be the exception rather than the rule. Variables offer greater flexibility, are easier to maintain, and can be reused across multiple places in your CSS — making them a better choice than inline styles.
HTML
This assumes your prop is a valid CSS value.
style="color-scheme: {props.styling.scheme}"Acceptable values: normal; light; dark; light dark; conly light;
Example
This image shows a component select element populated with the various options
Custom Classes
Components allow you to assign class properties to any element within a component. Ther all for greater flexibility and are useful for adding known classes or creating a one-off version of a component.
HTML
The property is added to the “class” attribute in line with other classes or alone. Components 2.0 made assigning these much easier by simply clicking the prop, then clicking the element — Etch places the property where it is needed.
class="some-known-class {props.classes}"class="{props.classes}"Combining Approaches
This is not an either-or requirement, and in complex or flexible components, you often see a combination of data attributes, inline variables, and custom classes.
HTML
<section data-block-padding={props.useDiffBPad} style="--padding-block:{props.blockPadding};--padding-inline:{props.inlinePadding};--padding-block-end:{props.blockPaddingEnd};--padding-block-start:{props.blockPaddingStart}" data-etch-element="section" class="basic-section {props.sectionStyles}">{@slot container}</section>
Leave a Reply