瀏覽代碼

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

master
Chunxian Zhang 2 年之前
父節點
當前提交
63793c70d0
共有 3 個檔案被更改,包括 55 行新增40 行删除
  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 查看文件

@ -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 查看文件


Loading…
取消
儲存