Separator
Import
- Separator: The main component to display an separator.
Usage
Johan Sebastiàn
A programmer for fun
Github
X
Linkedin
import { Separator } from "@openlite/ui"
export function SeparatorDemo() {
return (
<div className="w-96">
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">Johan Sebastiàn</h4>
<p className="text-sm text-muted-foreground">
A programmer for fun
</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center space-x-4 text-sm">
<div>Github</div>
<Separator orientation="vertical" />
<div>X</div>
<Separator orientation="vertical" />
<div>Linkedin</div>
</div>
</div>
)
}
Examples
Orietation
Hola Mundo
Github
X
Linkedin
import { Separator } from "@openlite/ui"
export function SeparatorDemo() {
return (
<>
<div className="mb-2">
<h2>Hola Mundo</h2>
<Separator />
</div>
<div className="flex h-5 items-center space-x-4 text-sm">
<div>Github</div>
<Separator orientation="vertical" />
<div>X</div>
<Separator orientation="vertical" />
<div>Linkedin</div>
</div>
</>
)
}
API
Separator Props
Props | Type | Description |
---|---|---|
orientation | 'vertical' | 'horizontal' | The orientation of the separator. |