Преглед изворни кода

✨ feat(components): add UI button component with variants

- 创建基础Button组件,支持多种样式变体
- 实现variant属性: default/destructive/outline/secondary/ghost/link
- 实现size属性: default/sm/lg/icon
- 使用class-variance-authority管理样式变体
- 导出buttonVariants供外部使用
yourname пре 4 месеци
родитељ
комит
f390dc3e8e
1 измењених фајлова са 46 додато и 0 уклоњено
  1. 46 0
      mini/src/components/ui/button.tsx

+ 46 - 0
mini/src/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import { Button as TaroButton, ButtonProps as TaroButtonProps } from '@tarojs/components'
+import { cn } from '@/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'underline-offset-4 hover:underline text-primary',
+      },
+      size: {
+        default: 'h-10 py-2 px-4',
+        sm: 'h-9 px-3 rounded-md text-xs',
+        lg: 'h-11 px-8 rounded-md',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+interface ButtonProps extends Omit<TaroButtonProps, 'size'>, VariantProps<typeof buttonVariants> {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TaroButton
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+// 预定义的按钮样式导出
+export { buttonVariants }