如何在 nativescript-angular html 文件中添加水平线

Posted 2023-04-13

【中文标题】如何在 nativescript-angular html 文件中添加水平线

【英文标题】：how to add horizontal line in nativescript-angular html file

【发布时间】：2019-02-08 12:32:33

【问题描述】：

我在 nativescript-angular 的组件 html 文件中尝试了“hr”标签。但它没有在模拟器中显示水平线。 （用ios模拟器测试）

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

【参考方案1】：

那hr 不应该作为StackLayout 中的一个类吗？

点赞<StackLayout class="hr-light">...

Reference

【讨论】：

注意：CSS 类 hr-light 是 nativescript-theme 插件的一部分

另一种创建线条的方法是简单地使用 CSS 属性 border docs.nativescript.org/ui/styling#supported-css-properties

【参考方案2】：

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

// 给底部边框

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

// 给上边框

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

【讨论】：

这应该是推荐的答案。出于性能考虑，水平线使用一个 StackLayout（相当于一个原生容器）效率不高。