The original target is level-up front-end skills, and a collection of awesome and useful web-components!
This repo is not a ui-framework like antd or material, there is not a desigin system in it. Basic web-elements and Pro web-components will mixed in driddle.
📝 easy to modify - like modify style and components
📦 easy to use - based on styled-components , not more loaders in project
💅 will overwrite but no addtional styles - try not to add extra styles
npm install driddle --save
use with babel-plugin-import, config in .babelrc
module . exports = {
... ,
plugins : [
[
' import ' ,
{
libraryName : ' driddle ' ,
} ,
] ,
]
}
docs | live-demo
< Ticket
style = { { width : ' 335px ' , filter : ' drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) ' } }
poster = " https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=48389a62913df8dcb23087c3ac7819ee/7a899e510fb30f247a507896c695d143ac4b0358.jpg "
>
< Ticket.Meta
title = " Wonder Women "
description = " Lorem ipsum dolor sit amet consectetur adipisicing elit. "
/>
< Ticket.Location value = " Lorem ipsum dolor sit amet consectetur adipisicing elit. " />
< Ticket.Info
value = { [
{
title : ' Salon ' ,
description : ' 03 ' ,
} ,
{
title : ' Row ' ,
description : ' 05 ' ,
} ,
{
title : ' Seat ' ,
description : ' 03-05 ' ,
} ,
] }
/>
< Ticket.Code value = " 303 " type = " bar " />
</ Ticket >
docs | live-demo
shake the phone and popup it
< ShakeIt >
< div
style = { {
height : ' 400px ' ,
display : ' flex ' ,
justifyContent : ' center ' ,
alignItems : ' center ' ,
} }
>
content
</ div >
</ ShakeIt >
docs | live-demo
the moon processing
docs | live-demo
the flip-number animation
const [ cnt , setCnt ] = useState ( 0 )
return (
< FlipNumber value = { cnt } onClick = { ( ) => setCnt ( prev => prev + 1 ) } />
)
docs | live-demo
without hooks
const [ value , setValue ] = useState ( 0 )
useEffect ( ( ) => {
setTimeout ( ( ) => {
setValue ( 1 )
} , 1000 )
} , [ ] )
return (
< ProcessNumber
value = { value }
style = { { fontSize : ' 48px ' , color : ' white ' , marginRight : ' 16px ' } }
/>
)
with hooks
const [ value , setValue ] = useState ( 0 )
const { processNumber , start } = ProcessNumber . useProcessNumber ( {
value ,
} )
useEffect ( ( ) => {
start ( )
setTimeout ( ( ) => {
setValue ( 1 )
} , 1000 )
} , [ ] )
return (
< ProcessNumber.C style = { { fontSize : ' 48px ' , color : ' white ' } } >
{ processNumber }
</ ProcessNumber.C >
)
>>>more useage
👤 JW
Give a ⭐️ if this project helped you!
Copyright © 2019 JW .
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator
