react-genshin-progress

React，启动！

本项目仅供娱乐，请勿用于GNU许可范围外的用途。图标来自《原神》，图标由米哈游版权所有。

本项目基于React开发，仅在React测试通过。

用法

安装

npm i react-genshin-progress

引入

import { GIProgress } from 'react-genshin-progress';

示例

在页面中：

<GIProgress num={60} width={300}/>

API

参数	类型	内容	默认值
num	Number	加载进度	0
width	Number	宽度（单位px）	100%
progressStyle	CSS Object	进度条上层样式	null
backgroundStyle	CSS Object	进度条背景样式	null

num

此参数表示进度条的进度，范围 [0,100] ，数值为 93 正好卡半岩

如果需要动态改变，需要使用 react useState()

import { useState } from 'react';
import { GIProgress } from 'react-genshin-progress';
const App = () => {
    const [num, setNum] = useState(0);
    return (<>
        <button onClick={() => {
            setNum(previous => (previous++))
        }}>+1</button>
        <GIProgress num={num} />
    </>);
}

export default App;

width

此参数用于定义宽度，传入 number 时表示px，例如

<GIProgress width={600} />

表示这个进度条的宽度为600px

由于进度条本身的 position: absolute 直接设置百分比可能没有效果，建议使用绝对宽度。

progressStyle && backgroundStyle

这两个都是用来定义整个进度条的前景背景样式，由于进度条已内置以下属性：

进度条背景

{
    zIndex: 0,
    position: 'absolute',
    overflow: "hidden"
}

进度条前景

{
     zIndex: 1,
     position: 'relative',
     clipPath: `inset(0px ${100 - num}% 0px 0px)`,
     transition: 'clip-path .5s'
}

直接更改可能会覆盖本身属性，从而失去本身效果