Usage
The divider component is used to create a simple visual separation between elements.
<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring ring-black/5 shadow-md">
<div class="flex gap-4">
<div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-violet-200 text-black">
<span class="font-semibold text-lg">RG</span>
</div>
<div class="space-y-1">
<h4 class="font-semibold">Coffee Catch-up?</h4>
<p class="text-sm text-foreground-500 line-clamp-2">
Hi Rachel,
Hope you’re doing well! Are you free for a quick coffee catch-up later this week?
It’s been a while, and I’d love to catch up on things.
</p>
</div>
</div>
<LumexDivider />
<div class="flex gap-4">
<div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-sky-200 text-black">
<span class="font-semibold text-lg">SC</span>
</div>
<div class="space-y-1">
<h4 class="font-semibold">Welcome to the Team!</h4>
<p class="text-sm text-foreground-500 line-clamp-2">
Hey Sara,
Welcome aboard! We’re excited to have you with us.
Let me know if you need anything while settling in.
Looking forward to working together!
</p>
</div>
</div>
</div>
Orientation
The divider component supports both horizontal and vertical orientations.
You can switch it to vertical when needed to separate content vertically.
Use the Orientation parameter.
<div class="flex h-8 p-1 space-x-2 items-center bg-white ring ring-black/5 rounded-sm shadow-md">
<LumexIcon Icon="@Icons.Rounded.FormatAlignLeft" />
<LumexIcon Icon="@Icons.Rounded.FormatAlignCenter" />
<LumexIcon Icon="@Icons.Rounded.FormatAlignRight" />
<LumexDivider Orientation="@Orientation.Vertical" />
<LumexIcon Icon="@Icons.Rounded.FormatBold" />
</div>
Custom Styles
You can customize the divider component by passing any Tailwind CSS
classes to the component's Class and/or Style parameters.
<ul class="flex h-10 p-1 space-x-4 items-center bg-zinc-50">
<li>World</li>
<LumexDivider Orientation="@Orientation.Vertical" />
<li>Economics</li>
<LumexDivider Orientation="@Orientation.Vertical" />
<li>Sports</li>
<LumexDivider Orientation="@Orientation.Vertical" />
<li>Art</li>
<LumexDivider Orientation="@Orientation.Vertical"
Class="w-0.5"
Style="--lumex-divider: var(--lumex-danger); --lumex-opacity-divider: 50%" />
<li class="font-semibold text-danger">Breaking News</li>
</ul>
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.