@ chakra-ui/ 可点击

执行本地人所有互动的回放钩 button 组件 即使它被禁用,也支持它成为焦点.

它既可以使用原生按钮元素也可以使用其他元素(如: div) (中文(简体) ).

安装

import { useClickable } from "@chakra-ui/clickable"

使用量

// create a clickable primitive
const Clickable = (props) => {
  const clickable = useClickable(props)
  return <chakra.button display="inline-flex" {...clickable} />
}

// use the clickable primitive
const Example = () => (
  <Clickable
    as="div"
    onClick={(event) => {
      alert("clicked")
    }}
    _active={{ bg: "blue", color: "white" }}
    _disabled={{ opacity: 0.4, pointerEvents: "none" }}
  >
    Clickable
  </Clickable>
)