是否可以在 CUBA Platform 中设计带圆角的桌子？

Question

我想为我的桌子做圆边。刚刚尝试修改v-table-border-radius。它只是使边界变圆，所以它看起来像这样：

我能做什么？

Answer 1

以下样式解决了该问题：

.v-table {
  background: transparent;

  .v-table-header-wrap {
    overflow: hidden;
  }

  .v-table-body {
    $background-color: $v-table-background-color or valo-table-background-color();
    background: $background-color;
  }
}

将它添加到主题扩展名，例如在hover-ext.scss文件中。

还值得为第一列标题添加更大的填充，例如：

.v-table-header-cell:first-child:not(.c-grouptable-group-divider-header) .v-table-caption-container {
  padding-left: round($v-unit-size / 2);
}

请注意，该v-table-border-radius变量用于为表格页眉和页脚添加边框半径。页脚是隐藏的，直到您将聚合与aggregationStyle="BOTTOM". 为了在没有页脚的情况下拥有底部边框半径，我建议将自定义样式名称添加到添加底部边框半径的表中，而不是全局添加它，以防您使用BOTTOM聚合，例如：

<table stylename="bottom-border-radius" ...> 具有以下样式实现：

.bottom-border-radius .v-table-body {
  @if $v-table-border-radius > 0 {
    border-radius: 0 0 $v-table-border-radius $v-table-border-radius;
  }
}

更新：改进了与表格背景颜色不同的屏幕背景颜色样式。Upd2：为底部边框半径添加了自定义样式。