Browse Source

fe-22 封装风格统一的button组件

master
Chunxian Zhang 2 years ago
parent
commit
63793c70d0
3 changed files with 55 additions and 40 deletions
  1. +15
    -0
      lazy-timer-fe/src/components/Button.jsx
  2. +0
    -0
      lazy-timer-fe/src/contexts/ContextProvider.js

+ 15
- 0
lazy-timer-fe/src/components/Button.jsx View File

@ -0,0 +1,15 @@
import React from 'react'
import { useStateContext } from '../contexts/ContextProvider'
const Button = ({ icon, bgColor, color, bgHoverColor, size, text, borderRadius, width }) => {
const { setIsClicked, initialState } = useStateContext()
return (
<button type="button" onClick={() => setIsClicked(initialState)} style={{ backgroundColor: bgColor, color, borderRadius }} className={` text-${size} p-3 w-${width} hover:drop-shadow-xl hover:bg-${bgHoverColor}`}>
{icon} {text}
</button>
)
}
export default Button

lazy-timer-fe/src/context/ContextProvider.js → lazy-timer-fe/src/contexts/ContextProvider.js View File


Loading…
Cancel
Save