ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Добавлена документация компонента LoaderPortal

Browse Source
This commit is contained in:
Александр Сироткин 2022-12-19 08:07:08 +05:00
parent bfd1e51cfa
commit 8f52066bce
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/LoaderPortal.tsx
View File

@ -3,12 +3,19 @@ import { HTMLAttributes } from 'react'
import { Loader } from '@components/icons' import { Loader } from '@components/icons'
type LoaderPortalProps = HTMLAttributes<HTMLDivElement> & { type LoaderPortalProps = HTMLAttributes<HTMLDivElement> & {
/** Показать ли загрузку */
show?: boolean, show?: boolean,
/** Затемнять ли дочерний блок */
fade?: boolean, fade?: boolean,
/** Параметры спиннера */
spinnerProps?: HTMLAttributes<HTMLDivElement>, spinnerProps?: HTMLAttributes<HTMLDivElement>,
/** Заполнять ли контент на 100% */
fillContent?: boolean fillContent?: boolean
} }
/**
* @description Добавляет оверлей загрузки над обёрнутым блоком
*/
export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className = '', show, fade = true, children, spinnerProps, fillContent, ...other }) => ( export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className = '', show, fade = true, children, spinnerProps, fillContent, ...other }) => (
<div className={`loader-container ${className}`} {...other}> <div className={`loader-container ${className}`} {...other}>
<div className={`loader-content${fillContent ? ' loader-content-fill' : ''}`}>{children}</div> <div className={`loader-content${fillContent ? ' loader-content-fill' : ''}`}>{children}</div>

6
src/styles/components/loader.css
View File

@ -58,9 +58,9 @@
place-self: center; place-self: center;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
z-index: 1; z-index: 1;
height: 80px; height: 80px;
width: 80px; width: 80px;
border-radius: 40px; border-radius: 40px;
} }
@ -71,6 +71,6 @@
background-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.4);
align-self: stretch; align-self: stretch;
justify-self: stretch; justify-self: stretch;
z-index: 1; z-index: 1;
box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4); box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
} }