做网站做推广有效果吗,莱阳做网站,官网网站建设研究,2345系统导航shadcn/ui组件比较灵活#xff0c;但是功能相比ant之类组件还是缺少太多功能#xff0c;本文为shadcn/ui为button组件增加图标#xff0c;加载中动画等效果。
安装Lucide
npm install lucideLucide组件
import { cn } from /lib/utils;
import { icons } from lucide-rea…shadcn/ui组件比较灵活但是功能相比ant之类组件还是缺少太多功能本文为shadcn/ui为button组件增加图标加载中动画等效果。
安装Lucide
npm install lucideLucide组件
import { cn } from /lib/utils;
import { icons } from lucide-react;const LcIcon ({ name, color, size, className }: { name: string, color?: string, size: number, className?: string}) {const LucideIcon (icons as any)[name];if(LucideIcon null) {return /}if(color ! null) {return LucideIcon color{color} size{size} /} else {return LucideIcon size{size} className{cn(, className)}/}
};export default LcIcon;创建组件CustomButton
use client
import React, { MouseEventHandler } from react;
import { Button } from ../ui/button;
import LcIcon from ./lc-icon;/** * Button扩展增加图标功能 * CustomButton iconLoader onClick{handleSubmit}Button/CustomButton* */
export const CustomButton (props: {className?: string, icon?: string, loading?: booleandisabled?: boolean,type?: string,onClick?: MouseEventHandlerHTMLButtonElement,children?: any
}) {const buildIcon () {if(props.loading ! null props.loading) {return LcIcon nameLoader size{16} classNamemr-1 animate-spin/}else if(props.icon ! null) {return LcIcon name{props.icon} size{16} classNamemr-1/}return }return (Button type{props.type ?? button as any} className{props.className} disabled{props.disabled} onClick{props.onClick}{ buildIcon() }{ props.children }/Button)
}组件使用
显示加载中
import { CustomButton } from /components/app/custom-button;CustomButton loading{true} disabled{true} 测试/CustomButton显示图标
import { CustomButton } from /components/app/custom-button;CustomButton iconHome测试/CustomButton
