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>

score 11 · Accepted Answer · answered Sep 03 '18 at 12:43

11

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

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

Reference

answered Sep 03 '18 at 12:43

Dzhavat Ushev

725
4
13

2

Note: the CSS class `hr-light` is part of `nativescript-theme` plugin – Nick Iliev Sep 04 '18 at 08:48
1

Another option to create lines is to simply use CSS property `border` https://docs.nativescript.org/ui/styling#supported-css-properties – Nick Iliev Sep 04 '18 at 08:49

score 1 · Answer 2 · edited Jan 24 '20 at 10:27

1

<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;
}

edited Jan 24 '20 at 10:27

MartenCatcher

2,713
8
26
39

answered Jan 24 '20 at 09:35

ixhimanshu

77
5

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. – Keith OYS Oct 14 '20 at 07:46

how to add horizontal line in nativescript-angular html file

2 Answers2