d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 15:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

float按钮统一

Browse Source
This commit is contained in:
tangly1024
2022-01-11 15:58:57 +08:00
parent 9747097f71
commit 8d1abcdf5b
10 changed files with 199 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/Progress.js
View File

@@ -6,10 +6,11 @@ import React, { useEffect, useState } from 'react'
* @constructor
*/
const Progress = ({ targetRef, showPercent = true }) => {
const currentRef = targetRef?.current || targetRef
const [percent, changePercent] = useState(0)
const scrollListener = () => {
if (targetRef?.current) {
const clientHeight = targetRef ? (targetRef.current.clientHeight) : 0
if (currentRef) {
const clientHeight = currentRef ? (currentRef.clientHeight) : 0
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
@@ -24,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
return (<div className='h-4 w-full shadow-2xl bg-gray-400 font-sans'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
{showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
</div>