goddonebianu
5f24929116
All checks were successful
continuous-integration/drone/push Build is passing
... ... ... ...
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
// 向后兼容的按钮组件包装器
|
|
// 这些组件将新 Button 组件包装，以保持向后兼容
|
|
|
|
import Button from "../Button";
|
|
|
|
// LightButton: 次要按钮，支持 selected 状态
|
|
export const LightButton = (props: any) => <Button variant="secondary" {...props} />;
|
|
|
|
// GreenButton: 主题色主要按钮
|
|
export const GreenButton = (props: any) => <Button variant="primary" {...props} />;
|
|
|
|
// IconButton: SVG 图标按钮
|
|
export const IconButton = (props: any) => {
|
|
const { icon, ...rest } = props;
|
|
return <Button variant="icon" leftIcon={icon} {...rest} />;
|
|
};
|
|
|
|
// GhostButton: 透明导航按钮
|
|
export const GhostButton = (props: any) => {
|
|
const { className, children, ...rest } = props;
|
|
return (
|
|
<Button variant="ghost" className={className} {...rest}>
|
|
{children}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
// IconClick: 图片图标按钮
|
|
export const IconClick = (props: any) => {
|
|
// IconClick 使用 src/alt 属性，需要映射到 Button 的 iconSrc/iconAlt
|
|
const { src, alt, size, disableOnHoverBgChange, className, ...rest } = props;
|
|
let buttonSize: "sm" | "md" | "lg" = "md";
|
|
if (typeof size === "number") {
|
|
if (size <= 20) buttonSize = "sm";
|
|
else if (size >= 32) buttonSize = "lg";
|
|
} else if (typeof size === "string") {
|
|
buttonSize = (size === "sm" || size === "md" || size === "lg") ? size : "md";
|
|
}
|
|
|
|
// 如果禁用悬停背景变化，通过 className 覆盖
|
|
const hoverClass = disableOnHoverBgChange ? "hover:bg-black/30 hover:cursor-pointer border-0 bg-transparent shadow-none" : "";
|
|
|
|
return (
|
|
<Button
|
|
variant="icon"
|
|
iconSrc={src}
|
|
iconAlt={alt}
|
|
size={buttonSize}
|
|
className={`${hoverClass} ${className || ""}`}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// PlainButton: 基础小按钮
|
|
export const PlainButton = (props: any) => <Button variant="secondary" size="sm" {...props} />;
|