创建组件CustomButton "use client" import React, { MouseEventHandler } from "react"; import { Button } from "../ui/button"; import LcIcon from "./lc-icon"; /** * Button扩展,增加图标功能 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton> * */ export const ...
创建组件CustomButton "use client"importReact,{MouseEventHandler}from"react";import{Button}from"../ui/button";importLcIconfrom"./lc-icon";/** * Button扩展,增加图标功能 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton> * */exportconstCustomButton=(props:{className?:s...
可以看到 shadcn/ui 直接把组件代码增加的了我们的项目中。这样的好处显而易见,对比我们使用类似Ant Design之类的组件库,如果想要高度定制样式 shadcn/ui 会更容易一些。我们把button添加到页面中运行看一下效果: "use client";import{Button}from"@/components/ui/button";exportdefaultfunctionHome(){return(<div...
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc...
<ShadcnIcon icon="Save" size="12"/> </ShadcnButton> </template> <script setup lang="ts"> const columns = [ { label: 'Name', key: 'name' }, { label: 'Address', key: 'address' }, { label: 'Age', key: 'age' } ] const data = [ { name: 'John Doe', address:...
* Button扩展,增加图标功能 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton> * */exportconstCustomButton=(props:{variant?:string,size?:string,className?:string,iconClassName?:string,icon?:string,loading?:booleandisabled?:boolean,type?:string,onClick?:MouseEventHandler<HTML...
{icon &&<spanclassName='mr-2'>{icon}</span>} {children}</Comp>) })Button.displayName='Button' 3. 主题定制 我们实现了一个灵活的主题切换系统: // lib/themes.tsexportconstthemes = {light: {'--background':'0 0% 100%','--foreground':'222.2 84% 4.9%','--primary':'222.2 47.4% ...
<ShadcnButton>Button 1</ShadcnButton> <ShadcnButton>Button 2</ShadcnButton> </div> </template> </ShadcnEmpty> </CodeRunner> ::: ::: details Show code ```vue <template> <ShadcnEmpty> <template #image> <ShadcnIcon icon="User" size="80"/> </template> <template #title> <h3 cl...
Well-documented: All necessary links are provided. Responsive: Looks great on both desktop and mobile devices. Interactive: Clickable elements for fast prototyping. Open-source: Available for everyone to use for free. Upcoming features: Two styles: Default and New York. ...
icon,children,...props},ref)=>{constComp=asChild?Slot:'button'return(<Comp className={cn(buttonVariants({variant,size,className}))}ref={ref}{...props}>{loading&&<LoadingSpinner className='mr-2 h-4 w-4 animate-spin'/>}{icon&&<span className='mr-2'>{icon}</span>}{children}</Comp...