ECSSv0.2

🇬🇧 English

🇷🇺 Русский

🇬🇧 English

🇷🇺 Русский

Appearance

Components and Adapters ​

Every @block compiles into a typed component for your framework. The adapter is responsible for this — a separate package for each framework (React, Vue, Svelte, SolidJS, Astro) and for plain DOM. Which adapter is active is set by defaultAdapter in the configuration.

Component name ​

The component name is a prefix plus the block name. By default the prefix is E:

  • @block Button → EButton
  • @block Card → ECard

The prefix is configured with the componentNamePrefix option. The component is imported directly from the .ecss file:

tsx
import { EButton } from './Button.ecss';

Parameters — the params prop ​

A block's parameters are passed via a single params prop. Their types are inferred from the @param declarations, so you can't pass an invalid value:

tsx
<EButton as="button" params={{ variant: 'primary' }}>
  Click me
</EButton>

For more on the @param ↔ params link, see the Parameters and States section.

Tag — the as prop ​

By default the component renders as a <div>. The as prop changes the root tag, and the typing adjusts the allowed HTML attributes to the chosen tag:

tsx
<EButton as="button" type="submit" params={{ variant: 'primary' }}>Submit</EButton>

<EButton as="a" href="/about" params={{ variant: 'ghost' }}>Link</EButton>

TIP

Don't forget as for semantics: <EButton> without as renders as a <div>. For a button specify as="button", for a link as="a".

Nested elements ​

If a block declares @element, they are available as nested components through the root's static properties:

tsx
<EButton params={{ withIcon: true }}>
  <EButton.Icon>★</EButton.Icon>
  <EButton.Text>Click me</EButton.Text>
</EButton>

Which adapter to choose ​

All adapters have the same API (params, as, sub-components) — only the syntax of the specific framework differs. Choose yours:

The common API of all adapters is described in the adapters overview.