Interaction States

Enable elements to support interactive state styles such as hover, press, focus, selected, and disabled.

Install Plugin

You need to install the state plugin to use it. Visit Github repository.

npm

npm install @leafer-in/state

pnpm

pnpm add @leafer-in/state

yarn

yarn add @leafer-in/state

bun

bun add @leafer-in/state

Or include via script tag and access plugin features through the global variable LeaferIN.state.

state.min

<script src="https://unpkg.com/@leafer-in/state@2.1.0/dist/state.min.js"></script>

state

<script src="https://unpkg.com/@leafer-in/state@2.1.0/dist/state.js"></script>

Demo

Button interaction effect

// #交互状态 [按钮效果 (Leafer)]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/state' // 导入交互状态插件

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: 'rgba(50,205,121, 0.7)',
    cornerRadius: 30,
    hoverStyle: { fill: 'rgba(50,205,121, 0.8)' },
    pressStyle: { fill: 'rgba(50,205,121, 1)' },
    cursor: 'pointer'
})

leafer.add(rect)

Next Steps

Hover State Style

Press State Style

Focus State Style

Selected State Style

Disabled State Style