how to add horizontal line in nativescript-angular html file

Question

I tried "hr" tag in component html file in nativescript-angular. But it doesn't shown horizontal line in simulator. (tested with ios simulator)

  <StackLayout>
     hr>
     <Label horizontalAlignment="left" textWrap="true" text="Description" class="description-text"></Label>
     </StackLayout>

Bopp

Answer 1

Shouldn't that hr go as a class inside the StackLayout?

Like <StackLayout class="hr-light">...

Reference

Protoplasm

Note: the CSS class hr-light is part of nativescript-theme plugin – Hymenopteran

Another option to create lines is to simply use CSS property border docs.nativescript.org/ui/styling#supported-css-properties – Hymenopteran

Answer 2

<Label class="line" text="About"></Label>

// To give the bottom border

.about-heading{
    font-size: 19;
    padding: 5 18;
    border-color: #3BEC9C;
    border-width: 0 0 2 0;
}

// To give the top border

.about-heading{
    font-size: 19;
    padding: 5 18;
    border-color: #3BEC9C;
    border-width: 2 0 0 0;
}

Nymph

This should be the recommended answer. For the sake of performance, using one StackLayout (equates to one native container) for a horizontal line, is not efficient. – Laurenelaurens