css - Angular SlickGrid 对齐标题文本

Question

我正在使用 Angular SlickGrid 并希望将列标题中的文本居中或右对齐。并非所有列都以相同的方式。

我发现，列定义中有一个 headerCssClass 属性，但我一直尝试，这种样式似乎从未被应用。

对于列定义:

    {
        id: 'sourceNumber',
        name: 'SourceNumber',
        field: 'SourceNumber',
        sortable: true,
        width: 150,
        headerCssClass: 'text-right',
        cssClass: 'text-right'
    },

在 CSS 文件中:

    .text-right {
        text-align: right;
    }

它对于单元格内容效果很好。但页眉中的文本仍然左对齐。

我做错了什么？

Answer 1

为了对齐网格单元，我通常使用为此目的创建的格式化程序 alignCenter 和 alignRight (请参阅 Formatters - Wiki 中的所有格式化程序)，您也可以像您一样使用额外的 CSS 类。

如果您保留额外的 CSS 类，那么 .slick-column-name 类上会有一个额外的 float: left ，您可能需要将其取消，并且这可能就是阻止(或取消)你的 CSS 的原因。但我必须说，它位于左侧是有原因的，将其移动到不同位置(尤其是右侧)并不理想，因为您可能会与标题菜单和排序图标发生冲突(如果您向右对齐，则肯定会发生冲突)

.slick-column-name {
  float: none;
}

另请注意，列定义 name 属性也接受 HTML 代码(尽管可能没有记录)，但即便如此，您可能也必须先取消 float

this.columnDefinitions = [
  { id: 'firstName', field: 'firstName', name: '<span style="color: blue">First Name</span>' },
];

最后，你还应该看一下所有的 SASS 变量(也有 CSS 变量等效名称)，你可以看到这个 _variables 中的所有变量。文件中，有很多可用的变量，但似乎不包含任何用于标题对齐的变量(我们将来可以为此添加变量)，还有这个 CSS Styling - Wiki有这方面的信息。

请注意，我是 Angular-Slickgrid 的作者