Divider

Overview#

A thin horizontal line separator. Renders as a 1pt rule. Color resolves from the border-* class if set, otherwise the platform separator color (UIColor.separator on iOS, Material outlineVariant on Android).

Copied!

<native:divider />

<native:divider />

<native:horizontal-divider /> is an equivalent divider component exposed for use inside side navigation. It emits its own horizontal_divider element but renders the same visual rule as <native:divider />.

Supported Tailwind classes#

The classes that affect how a divider renders:

Class	Effect
`border-{palette}-{shade}`, `border-[#hex]`, `border-theme-{token}`	Line color
`opacity-*`, `opacity-[0.5]`	Line opacity
`m-`, `mx-`, `my-`, `mt-` / `mr-` / `mb-` / `ml-*`	Spacing around the divider
`dark:border-*`	Dark-mode color override
`ios:border-`, `android:border-`	Platform-specific color

Examples#

Basic separator#

Copied!

<native:column class="w-full gap-4 p-4">
    <native:text class="text-lg font-bold text-theme-on-surface-variant">Section One</native:text>
    <native:text class="text-theme-on-surface-variant">Some content here.</native:text>
    <native:divider />
    <native:text class="text-lg font-bold text-theme-on-surface-variant">Section Two</native:text>
    <native:text class="text-theme-on-surface-variant">More content here.</native:text>
</native:column>

<native:column class="w-full gap-4 p-4">
    <native:text class="text-lg font-bold text-theme-on-surface-variant">Section One</native:text>
    <native:text class="text-theme-on-surface-variant">Some content here.</native:text>
    <native:divider />
    <native:text class="text-lg font-bold text-theme-on-surface-variant">Section Two</native:text>
    <native:text class="text-theme-on-surface-variant">More content here.</native:text>
</native:column>

Themed divider with margin#

Copied!

<native:divider class="border-theme-outline my-2 mx-4" />

<native:divider class="border-theme-outline my-2 mx-4" />

In a list#

Copied!

<native:column class="w-full">
    @foreach($items as $item)
        <native:column class="w-full p-4">
            <native:text class="text-base text-theme-on-surface-variant">{{ $item->name }}</native:text>
        </native:column>
        @unless($loop->last)
            <native:divider />
        @endunless
    @endforeach
</native:column>

<native:column class="w-full">
    @foreach($items as $item)
        <native:column class="w-full p-4">
            <native:text class="text-base text-theme-on-surface-variant">{{ $item->name }}</native:text>
        </native:column>
        @unless($loop->last)
            <native:divider />
        @endunless
    @endforeach
</native:column>

Thicker rule (use a column)#

Copied!

<native:column class="w-full h-1 bg-theme-outline my-4" />

<native:column class="w-full h-1 bg-theme-outline my-4" />

Element#

Copied!

use Native\Mobile\Edge\Elements\Divider;
 
Divider::make()->border(1, '#E2E8F0');

use Native\Mobile\Edge\Elements\Divider;

Divider::make()->border(1, '#E2E8F0');

make() - Create a divider
border(float $width, string $color) - Set the line width and color