Box hover

Component này khi hover vào sẽ hiển thị background xám và đổi background khi trạng thái active hoặc disabled

Ví dụ

import { BoxHover, Icon } from '@xobuilder/ui';

export const Demo = () => {
  return (
    <div>
      <BoxHover>
        <div>Content</div>
      </BoxHover>

      <BoxHover width="38px" minHeight="38px" borderRadius="200" cursor="pointer">
        <Icon name="ExitMajor" />
      </BoxHover>
    </div>
  )
}

Props

Name	Type	Default	Description
disabled	`boolean`	`false`	Trạng thái disabled sẽ không cho phép click vào component
innerRef	`RefObject<HTMLDivElement>`	-	Ref của inner
children	`ReactNode`	-	Nội dung của component
cursor	`pointer` \| `default`	`pointer`	Kiểu con trỏ
className	`string`	-	Classname của component
innerClassName	`string`	-	Classname của inner
innerStyle	`CSSProperties`	-	Style của inner
active	`boolean`	`false`	Trạng thái active
onClick	`() => void`	-	Callback khi click vào component
onMouseEnter	`() => void`	-	Callback khi hover vào component
onMouseLeave	`() => void`	-	Callback khi hover ra khỏi component

Ví dụ​

Props​

Ví dụ

Props