交互式网格图案 | Magic UI

文档

交互式网格图案

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

安装

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

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

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

贡献