Pseudo-classes

Each Atomic Props of Fower supports CSS pseudo-classes. The format of the Atomic Props that enable Pseudo-classes style is: {prop}--{pseudo}, for example: bgRed400--hover, bgYellow500--active, opacity-70--disabled, w-20--visited, etc.

Hover

Use --hover postfix to apply hover style.

Result

Loading...

Live Editor

<Button bgRed300 bgRed400--hover red800 p4 rounded-10> Hover me </Button>

<Button bgRed300 bgRed400--hover red800 p4 rounded-10>
  Hover me
</Button>

Active

Use --active postfix to apply active style.

Result

Loading...

Live Editor

<Button bgYellow300 bgYellow500--active yellow800 p4 rounded-10> Click Me </Button>

<Button bgYellow300 bgYellow500--active yellow800 p4 rounded-10>
  Click Me
</Button>

Disabled

Use --disabled postfix to apply disabled style.

Result

Loading...

Live Editor

<Box toCenter> <Button bgRed300 red800 p4 rounded-10 mr-20> Normal </Button> <Button disabled bgRed300 opacity-70--disabled red800 p4 rounded-10> Disabled </Button> </Box>

<Box toCenter>
  <Button bgRed300 red800 p4 rounded-10 mr-20>
    Normal
  </Button>
  <Button disabled bgRed300 opacity-70--disabled red800 p4 rounded-10>
    Disabled
  </Button>
</Box>

Focus

Use --focus postfix to apply focus style.

Result

Loading...

Live Editor

<Input bgGray200 outlineNone bgWhite--focus p2 border borderRed400--focus />

<Input bgGray200 outlineNone bgWhite--focus p2 border borderRed400--focus />

Child

Use --first-child postfix to apply first-child style. Use --last-child postfix to apply last-child style.

Result

Loading...

Live Editor

<Box> <Box red400--first-child>One</Box> <Box>Two</Box> <Box green400--last-child>Three</Box> </Box>

<Box>
  <Box red400--first-child>One</Box>
  <Box>Two</Box>
  <Box green400--last-child>Three</Box>
</Box>

Supported pseudo classes

By default, Fower supports these pseudo classes:

• active
• checked
• disabled
• enabled
• default
• empty
• focus
• focus-within
• invalid
• hover
• link
• visited
• first-child
• last-child
• after
• before
• placeholder
• selection

If you want more pseudo classes, you can use setConfig to add it:

import { setConfig } from '@fower/core'

setConfig({
  pseudos: ['focus-visible', 'blank'], // will merge to built-in pseudos
})

About file size

Each Atomic Props in Fower supports CSS pseudo-classes and 18 commonly used pseudo-classes. You may have questions about whether this will cause the code size of the Fower package to explode. The answer is no.

In traditional CSS, if each CSS class supports Pseudo-classes, a large amount of CSS code is required, because CSS is not programmable, and it can only accumulate code through enumeration.

Thanks to the flexibility of JS, Fower only needs dozens of lines of code to make all Atomic Props support Pseudo-classes.