EmptyPage

Application appears to have crashed and only displays a EmptyPage.

Author

• @author Henry Dyson J [email protected]

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

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

| Name | Description | Default | Control | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- | | containerStyle | SxProps<{}> | { } | containerStyle : {background : "#ffff"minHeight : "100vh"} | | emptyPageUrlHeight | number | 225 | | | emptyPageUrlWidth | number | 225 | | | iconContainerStyle | SxProps<{}> | { } | iconContainerStyle : {} | | emptyPageIconBgColor | string | "" | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); | | handleClickIcon | () => void | () => false | - | | title1Styles | SxProps<{}> | { } | title1Styles : {} | | title2Styles | SxProps<{}> | { } | title2Styles : {} | | title1MarginTop | number | 0 | | | title1MarginBottom | number | 0 | | | title1Size | number | 0 | | | title1Weight | number | 0 | | | title1Color | string | "" | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); | | title1 | string | "" | Add Bookmark | | title2Size | number | 12 | | | title2Weight | number | 0 | | | title2Color | string | "" | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); | | title2 | string | "" | - | | title2MarginTop | number | 0 | | | title2MarginBottom | number | 0 | | | emptyPageIcon | ReactNode | "" | "" | | emptyPageInfographic | ReactNode | "" | "" | | emptyPageUrl | string | "" | https://freefrontend.com/assets/img/html-css-404-page-templates/Pure-CSS-404-Error-Page.gif | | buttonColumnGap | number | 2 | | | buttonMarginTop | number | 2 | | | buttonStyles | SxProps<{}> | { } | buttonStyles : {} | | buttons | [ {label:"",handleClick:()=>{},color:"", backgroundColor:"" } ]{ label?: string; handleClick?: () => void; color?: string; backgroundColor?: string; }[] | [] | buttons : [0 : {...} 4 keys1 : {...} 4 keys] | | className | string | - | Set string | | id | string | string | string | | sx | SxProps<Theme> | - | Set object |