文档
分隔符
分隔符
从视觉上或语义上分隔内容。
import { Separator } from "@repo/tailwindcss/ui/separator";
const SeparatorDemo = () => {
return (
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
<p class="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<Separator class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Changelog</div>
</div>
</div>
);
};
export default SeparatorDemo;安装
npx shadcn-solid@latest add separator安装以下依赖项
npm install @kobalte/core将以下代码复制并粘贴到您的项目中
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { SeparatorRootProps } from "@kobalte/core/separator";
import { Separator as SeparatorPrimitive } from "@kobalte/core/separator";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
type separatorProps<T extends ValidComponent = "hr"> = SeparatorRootProps<T> & {
class?: string;
};
export const Separator = <T extends ValidComponent = "hr">(
props: PolymorphicProps<T, separatorProps<T>>,
) => {
const [local, rest] = splitProps(props as separatorProps, ["class"]);
return (
<SeparatorPrimitive
class={cn(
"shrink-0 bg-border data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
local.class,
)}
{...rest}
/>
);
};安装以下依赖项
npm install @kobalte/core将以下代码复制并粘贴到您的项目中
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { SeparatorRootProps } from "@kobalte/core/separator";
import { Separator as SeparatorPrimitive } from "@kobalte/core/separator";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
type separatorProps<T extends ValidComponent = "hr"> = SeparatorRootProps<T> & {
class?: string;
};
export const Separator = <T extends ValidComponent = "hr">(
props: PolymorphicProps<T, separatorProps<T>>,
) => {
const [local, rest] = splitProps(props as separatorProps, ["class"]);
return (
<SeparatorPrimitive
class={cn(
"shrink-0 bg-border data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
local.class,
)}
{...rest}
/>
);
};用法
import { Separator } from "@/components/ui/separator";<Separator />