Skip to content

交互状态 插件

使元素支持 hoverpressfocusselecteddisabled 交互状态样式。

适用平台

支持所有平台。

安装插件

需要安装 state 插件才能使用,点此访问 Github 仓库

sh
npm install @leafer-in/state
sh
pnpm add @leafer-in/state
sh
yarn add @leafer-in/state
sh
bun add @leafer-in/state

浏览器

通过全局变量 LeaferIN.state 访问插件内部功能。

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

https://unpkg.com 无法访问时,可替换为 https://cdn.jsdelivr.net/npm

体验

按钮交互效果

ts
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)

下一步

hover 状态样式

press 状态样式

focus 状态样式

selected 状态样式

disabled 状态样式

Released under the MIT License.