文档
徽章
徽章
显示徽章或看起来像徽章的组件。
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDemo = () => {
return <Badge>Badge</Badge>;
};
export default BadgeDemo;安装
npx shadcn-solid@latest add badge将以下代码复制并粘贴到您的项目中
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};将以下代码复制并粘贴到您的项目中
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:(outline-none ring-1.5 ring-ring)",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "border text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};用法
import { Badge } from "@/components/ui/badge";<Badge variant="outline">badge</Badge>链接
您可以使用 badgeVariants 助手函数来创建一个看起来像徽章的链接。
import { badgeVariants } from "@/components/ui/badge";<A class={badgeVariants({ variant: "outline" })}>Click here</A>或者，您可以设置 asChild 参数并嵌套链接组件。
<Badge asChild>
<As component={A} href="#">
Login
</As>
</Badge>示例
次要
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeSecondary = () => {
return <Badge variant="secondary">Secondary</Badge>;
};
export default BadgeSecondary;破坏性
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDestructive = () => {
return <Badge variant="destructive">Destructive</Badge>;
};
export default BadgeDestructive;轮廓
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeOutline = () => {
return <Badge variant="outline">Outline</Badge>;
};
export default BadgeOutline;