0.0.2 • Published 8 months ago

@licuido-ui/ui_empty-page v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

EmptyPage

Application appears to have crashed and only displays a EmptyPage.

Author

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_empty-page

Import component

import { EmptyPage } from '@licuido-ui/ui_empty-page';

Usage

<EmptyPage emptyPageIcon={'icon'} />

Image

alt text

Sample Code

 <EmptyPage
    emptyPageIcon={""}
    emptyPageInfographic={""}
    emptyPageUrl={
        "https://cdn.vectorstock.com/i/preview-1x/04/12/no-data-empty-data-concept-vector-41830412.jpg"
    }
    emptyPageUrlHeight={"100%"}
    emptyPageUrlWidth={"100%"}
    containerStyle={{}}
    iconContainerStyle={{ minHeight: "100vh" }}
    emptyPageIconBgColor={"#EFEEFB"}
    handleClickIcon={() => {}}
    title1Styles={{}}
    title2Styles={{}}
    title1MarginTop={2}
    title1MarginBottom={3}
    title1Size={16}
    title1Weight={600}
    title1Color={"#3B3B3B"}
    title1={"Add Bookmark"}
    title2Size={14}
    title2Weight={500}
    title2Color={"#3B3B3B"}
    title2={"Click the above icon to add"}
    title2MarginTop={0}
    title2MarginBottom={0}
    buttonColumnGap={2}
    buttonMarginTop={2}
    buttonStyles={{}}
    buttons={buttons}
/>

Props

NameDescriptionDefaultControl
containerStyleSxProps<{}>{ }containerStyle : {background : "#ffff"minHeight : "100vh"}
emptyPageUrlHeightnumber225
emptyPageUrlWidthnumber225
iconContainerStyleSxProps<{}>{ }iconContainerStyle : {}
emptyPageIconBgColorstring""linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
handleClickIcon() => void() => false-
title1StylesSxProps<{}>{ }title1Styles : {}
title2StylesSxProps<{}>{ }title2Styles : {}
title1MarginTopnumber0
title1MarginBottomnumber0
title1Sizenumber0
title1Weightnumber0
title1Colorstring""linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
title1string""Add Bookmark
title2Sizenumber12
title2Weightnumber0
title2Colorstring""linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
title2string""-
title2MarginTopnumber0
title2MarginBottomnumber0
emptyPageIconReactNode""""
emptyPageInfographicReactNode""""
emptyPageUrlstring""https://freefrontend.com/assets/img/html-css-404-page-templates/Pure-CSS-404-Error-Page.gif
buttonColumnGapnumber2
buttonMarginTopnumber2
buttonStylesSxProps<{}>{ }buttonStyles : {}
buttons {label:"",handleClick:()=>{},color:"", backgroundColor:"" } { label?: string; handleClick?: () => void; color?: string; backgroundColor?: string; }[][]buttons : 0 : {...} 4 keys1 : {...} 4 keys
classNamestring-Set string
idstringstringstring
sxSxProps<Theme>-Set object
@emotion/react@emotion/styled@mui/materialreactreact-dom@licuido-ui/ui_button
@licuido-ui/react
0.0.2

8 months ago