dialui-components
v1.1.1
Published
mini set of react componentes
Downloads
16
Maintainers
Readme
dialui-components
mini set of react componentes
Install: npm i dialui-components
user Interface Components
Form Components
visit npm: npm package dialui-components. For more info about documentation visit: dialui-components
UI Components
Alert:
Function that opens alert in lazy mode
import {openAlert} from "dialui-components"
openAlert({
message: typeMessage,
type: typeError,
sideX?: "right",
sideY?: "down",
duration?: 4000,
});
more details: Alert
Buttons:
Button component with many colors and animation styles
import {Button} from "dialui-components"
<Button
buttonStyle="ripple"
backgroundColor="blue-200"
size="sm-100"
borderRadius="r-3"
spinner="fleas"
onClick={() => console.log("click")}
isLoading
>
Send message
</Button>
more details: Button
Modal:
Function that opens modal in lazy mode
import {openModal} from "dialui-components
openModal({
animation: "jumpToDown",
description: "Are you sure?",
title: "Delete user",
type: "info",
});
more details: Modal
Notification:
import { Notification } from "dialui-components/";
const notification = 3;
<Notification
hasNotification={totalNotifications > 0}
size="sm"
backgroundColor="blue-500"
>
{totalNotifications === 0 ? "+99" : totalNotifications.toString()}
</Notification>;
more details: Notification
Table:
import {Table, TableHead, TableBody, Cell, Row, Title, } from "dialui-components/";
<Table>
<TableHead>
<Row backgroundColor={backgroundColor}>
<Title>id</Title>
</Row>
</TableHead>
<TableBody>
{data.map((person) => (
<Row backgroundColor={backgroundColor} key={person.id}>
<Cell>{person.id}</Cell>
<Cell>
<Button
buttonStyle="table"
backgroundColor="blue-600"
textTransform="uppercase"
>
edit
</Button>
</Cell>
</Row>
))}
</TableBody>
</Table>;
More details: Table
Spinner:
import {openAlert} from "dialui-components"
<Spinner spinnerType="squares" />
More details: Spinner
visit the complete documentation at: dialui-components