Nativescript Listview 边界线

Question

是否可以增加列表视图中边界线的大小？例如，我有一个列表，我想要一个边界来分隔列表中的每个项目。只是想知道是否有办法做到这一点。

        <ListView [items]="dataList">
                <ng-template let-item="item">
                    <GridLayout class="list-group-item" columns="*,auto">
                       <Label col ="0"  class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" ></Label>

                    </GridLayout>
                </ng-template>
                </ListView>

Answer 1

您可以通过将此添加到 css

来删除默认的 Listview 分隔符

ListView {
  separator-color: transparent;
}

并通过将边框添加到与该单元格关联的 class 来为每个单独的单元格添加您自己的边框

.list-group-item {
  border-color: #000;
  border-width: 2;  
}

如果需要，您也可以通过稍微修改 html（在 GridLayout 上添加条件 class）为除最后一个单元格之外的每个单元格添加底部边框）

<ListView [items]="dataList">
  <ng-template let-item="item" let-i="index">
    <GridLayout class="list-group-item" [class.with-border-bottom]="i < dataList.length - 1" columns="*,auto">
      <Label col ="0"  class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" ></Label>
    </GridLayout>
  </ng-template>
</ListView>

.with-border-bottom {
  border-bottom-color: #000;
  border-bottom-width: 2;
}

Nativescript Listview 边界线

Nativescript Listview boarder lines

nativescript

angular