lighter-components v1.0.27
Lighter Components
Getting starter
Install
npm i lighter-components
Components
TextFiled
Customized input
Importation
import LightTextfield from 'lighter-components/material/LightTextfield'
Attributes
variant
Defines which textfield style
Variant types
<LightTextfield label="Email" variant='outline' />
<LightTextfield label="Email" variant='default' />
color
Sets the color of the element
Color types
<LightTextfield label="Email" color='lightblue' /> <LightTextfield label="Email" color='lightgreen' /> <LightTextfield label="Email" color='lightpurple' /> <LightTextfield label="Email" color='lightyellow' /> <LightTextfield label="Email" color='lightred' /> <LightTextfield label="Email" color='dark' />
type
Sets the type of the element (Password or Text)
Types types
<LightTextfield label="Email" type='password' /> <LightTextfield label="Email" type='text' />
label
Defines the name that will appear as a placeholder
Label example
<LightTextfield label="Email" />
Button
Importation
import LightButton from 'lighter-components/material/LightButton'
Attributes
color
Sets the color of the element
Color types
<LightButton label="Send" color='lightblue' /> <LightButton label="Send" color='lightgreen' /> <LightButton label="Send" color='lightpurple' /> <LightButton label="Send" color='lightyellow' /> <LightButton label="Send" color='lightred' /> <LightButton label="Send" color='dark' />
label
Defines the name that will appear as a button
Label example
<LightButton label="Send" />
Modal
Importation
import LightModal from 'lighter-components/material/LightModal'
Attributes
open
Defines whether the modal is open or not
Open example
<LightModal open={*boolean variable*} />
onClose
Defines a handler to close the modal
Open example
<LightModal open={*boolean variable*} onClose={*handler*} />
Icons
Importation
import WarningIcon from 'lighter-components/material-icons/WarningIcon'
import InfoIcon from 'lighter-components/material-icons/InfoIcon'
import ErrorIcon from 'lighter-components/material-icons/ErrorIcon'
import SuccessIcon from 'lighter-components/material-icons/SuccessIcon'
Conclusion
This library is still in early versions, new components will arrive later.
Contact -> wesleyalencar@espacocariri.com
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago