交互式网格图案 | Magic UI

文档

交互式网格图案

一个用 SVG 制作的交互式背景网格图案，可使用 Tailwind CSS 完全自定义。

安装

import { InteractiveGridPattern } from "@/components/magicui/interactive-grid-pattern";

<div className="relative h-[500px] w-full overflow-hidden">
  <InteractiveGridPattern />
</div>

属性	类型	描述	默认值
`宽度`	`number`	网格中每个正方形的宽度	`40`
`高度`	`number`	网格中每个正方形的高度	`40`
`squares`	`[number, number]`	网格中的正方形数量。第一个数字是水平正方形数量，第二个是垂直正方形数量	`[24,24]`
`className`	`string`	应用于网格容器的类名	-
`squaresClassName`	`string`	应用于网格中单个正方形的类名	-

贡献