是否可以在 CUBA 平台中为 table 设置圆角样式？

Question

我想为我的 table 制作圆边。刚刚尝试修改 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变量用于给tableheader和footer[添加border radius] =41=]。页脚在您使用聚合和 aggregationStyle="BOTTOM" 之前是隐藏的。为了使底部边框不带页脚，我建议将自定义样式名称添加到 table 以添加底部边框半径而不是全局添加它，以防您使用 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; } }

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

是否可以在 CUBA 平台中为 table 设置圆角样式？

Is it possible to style a table with round corners in CUBA Platform?

css

cuba-platform

cuba