Search
๐Ÿ’ก

Separator

Created
2026/01/17 06:20
Tags
2026/01/17 07:36

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์ด๋ฉด ์˜๋ฏธ๋ก ์ ์œผ๋กœ ์ž‘์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.