GradientPlaceholderJS 用美丽的渐变填充任意大小的空白图片

一个非常轻量 和简单的渐变背景占位符。

NPM

要使用 GradientPlaceholderJS 这个 React 框架，只需通过 NPM 或您首选的包管理器安装：

npm i gradient-placeholder
yarn add gradient-placeholder
pnpm add gradient-placeholder

接下来，导入这个包：

import { GradientPlaceholder } from 'gradient-placeholder';

ReactJS / Vite 示例

import { GradientPlaceholder } from "gradient-placeholder";
​
<GradientPlaceholder width="500" height="500" gradient={['#078efb', '#f9035e']} />

大小

必填

通过为组件添加宽度和高度来指定占位符图片的大小。例如：

<GradientPlaceholder width="500" height="500"/>

渐变

可选

通过添加最多 4 种十六进制颜色代码的列表（最好是 2 种）来指定占位符图片中的自定义渐变。例如：

<GradientPlaceholder width="500" height="500" gradient={['#078efb', '#f9035e']}/>

文本

可选

通过添加您的文本来指定占位符图片中的自定义文本。例如：

<GradientPlaceholder width="500" height="500" text="Hello World!"/>

文本颜色

可选

通过为组件添加 color= 来指定文本颜色。我们支持 HEX 值或命名值（例如，white）。例如：

<GradientPlaceholder width="500" height="500" text="Hello World!" color="#fff"/>

背景颜色

可选

通过为组件添加 background= 来指定背景颜色。我们支持 HEX 值或命名值（例如，white）。例如：

<GradientPlaceholder width="500" height="500" background="#000"/>