Package Exports

glasscomponentss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (glasscomponentss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Welcome to Glasscomponentss

Getting started

Hello devs!

This is the package with most beautiful components in glassmorphism for React app's.

Pre-requisites

This package was written in Typescript, it is necessary that your environment has support for typescript code.

Install

For install, execute in your terminal the code below:

    # using yarn
    yarn add glasscomponentss
    # OR using npm
    npm install glasscomponentss

Using

All components in this package has a default component called Container, the container has some default properties, see below:

cardWidth
cardHeight
cardRadius
cardColorBorder
cardBackground
cardGlass
cardPaddingAll
cardPaddingLeft
cardPaddingRight
cardPaddingTop
cardPaddingBottom

About default properties

All properties below are used for basical definition of component, like your width, height, border, border radius, padding's and most important the Glass effect and your level.

Setting a component: For setting a component should set the following properties cardWidth, cardHeight, cardBackground, cardGlass, see below:

import { InputGlass } from "glasscomponentss"

    <InputGlass
        cardWidth={330}
        cardHeight={60}
        cardBackground="#f3f2f108"
        cardGlass={10}
    />

The cardWidth, cardHeight and cardGlass receive a value of the number, started of 0 or 0.0. For last the cardBackground for definition the color of your component, it a string in hexadecimal with opacity.

The other properties we using for definition of aesthetic the component, see below the table:

Name	Description
cardRadius	For apply a radius in the component
cardColorBorder	For apply a color in border of the component
cardPaddingAll	For apply a internal spacing in all directions in the component
cardPaddingLeft	For apply a internal spacing in left side in the component
cardPaddingRight	For apply a internal spacing in right side in the component
cardPaddingTop	For apply a internal spacing in top side in the component
cardPaddingBottom	For apply a internal spacing in bottom side in the component

All components

Have following components in the actual version 1.1.0

Input
Box Message
Credit Card
Box Chat Message

InputGlass component

This component has the following properties:

Name	Description	Type
inputPlaceholder	The text of "description" of your input	string
inputPlaceholderColor	The color of descrition text	string
buttonName	The name of button, like "click here" or "send"	string
buttonColor	The color of button, in hexadecimal with #	string

BoxMessageGlass component

This component has the following properties

Name	Description	Type
boxMessageTitle	The title of message	string
boxMessageContent	The message content	string
boxMessageButtonColor	The background color of button	string
boxMessageButtonText	The text of button	string
boxMessageCallBack	A callback	function
boxMessageButtonTextColor	The color of text button	string

BoxChatGlass component

This component has the following properties

Name	Description	Type
boxChatContent	The content of message	string
boxChatOnMe	This propertie is mandatory and it means if message is send for you(true) or no(false)	boolean

CreditCardGlass component

This component has the following properties

Name	Description	Type
cardTitle	The name of operator credit car, for example: Nubank and Visa	string
cardNumber	The number of credit card	number
cardNamePersonal	The personal name of user	string
cardDateValid	The valid date of credit card	string
cardChipImage	The chip image of credit card	string \ Data URI

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.

Donate :D

PicPay, thanks!

A Package created by a Brazilian for the world :D

Help me translate to all languages and fix problems for current translation :) .

This package belongs to a monorepo, the monorepo was created by me is part of my series of challenges of my channel on Twitch.

The aesthetic of package was inspired in following project RH Agency.

este pacote não possui quaisquer tipo de relação com a RH Agency e seus produtos, foi utilizado como inspiração visual alguns elemento como objetos 3d e cores apenas e não possui quaisquer objetivo comercial.

this package does not have any kind of relationship with the RH Agency and its products, was used as visual inspiration some element as 3d objects and colors only and has no commercial purpose.

See The UpLicense: Store Licensing for more details.

Github Monorepo

Glasscomponentss repository

Licença:

Esta obra está licenciada com uma Licença CC BY-NC-ND 4.0

This work is licensed with a License CC BY-NC-ND 4.0