Context
Sidebar์์ shadcn/ui์ Separator ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ๋ค. ๋ฐ๋ผ์ ์ด๋ฅผ ๋ถ์ํ๊ณ ์ดํดํ ํ์๊ฐ ์์ด ์ด ๊ธ์ ์์ฑ.
Agenda
โข
Separator ์ปดํฌ๋ํธ๋ฅผ ๋ถ์ํ๊ณ ๊ทธ ๋ด์ฉ์ ์ดํดํ๋ ๊ฒ์ ๋ชฉํ๋ก ํจ
Contents
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from '@ui/lib/utils';
import type * as React from 'react';
function Separator({
className,
orientation = 'horizontal',
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot='separator'
decorative={decorative}
orientation={orientation}
className={cn(
'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
className,
)}
{...props}
/>
);
}
export { Separator };
TypeScript
๋ณต์ฌ
shadcn/ui์ Separator๋ radix-ui์ Primitive Separator๋ฅผ ์ฌ์ฉํด ๊ตฌํํ๋ค. orientation์ horizontal ํน์ vertical๋ก ๋ฐ์ ์ธ๋ก, ๊ฐ๋ก ๊ตฌ๋ถ์ ์ผ๋ก ์คํ์ผ๋ง ํ๋ค. decorative ํ๋ผ๋ฏธํฐ๋ true์ผ ๋ ๋จ์ํ ์๊ฐ์ ์์๋ก๋ง ์์ฉํ๊ณ false์ด๋ฉด ์๋ฏธ๋ก ์ ์ผ๋ก ์์ฉํ์ง ์๋๋ค.