Divider | Neural Native

Import

component.ts

import { NeuDividerComponent } from '@neural-ui/native/divider';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

The details add up

A horizontal divider separates a receipt total from its items; a vertical divider separates two equal metadata columns. Both sit within content with deliberate spacing.

View and copy the complete example

basic.component.ts

import { Component } from '@angular/core';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuDividerComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">The details add up</text><text class="product-caption">Separate groups without adding noise</text></view>
    <view class="product-surface"><text class="product-heading">Team lunch receipt</text>
    <view class="product-row"><view class="product-copy"><text>Set lunch × 2</text></view><text>48 €</text></view>
    <text class="product-caption">Friday · Neural Studio</text><neu-divider />
    <view class="product-row"><view class="product-copy"><text class="product-heading">Total</text></view><text class="product-heading">48 €</text></view></view>
    <view class="product-surface"><view class="receipt-metadata"><view class="product-copy"><text class="product-heading">Guests</text><text class="product-caption">2</text></view><neu-divider orientation="vertical" /><view class="product-copy"><text class="product-heading">Table</text><text class="product-caption">04</text></view></view></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.receipt-metadata { flex-direction: row; gap: 20px; min-height: 64px; align-items: stretch; }
  `,
})
export class ExampleComponent {

}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Divider · android · native capture — **Android**Native screenshot

Divider · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
orientation	"horizontal" \| "vertical"	'horizontal'	Input	Layout direction using the supported values shown in the type column.

Models

This component declares no two-way models.

Outputs

This component declares no public outputs.