使用带有Angular2 +的VMWare Clarity Design隐藏可扩展Datagrid上的插入符列

Question

我正在使用VMWare Clarity Datagrid组件.

描述:

我有两个数据网格,当扩展左数据网格(红色)的一行时,我设法扩展了右边的数据库(蓝色).

我的目标:

1. 隐藏右侧数据网格上的插入符号列,仍然可以展开其行.当我在浏览器display: none;中的.datagrid .datagrid-expandable-caret类中添加规则时,它可以正常工作,但在.scss文件中却没有.
2. 隐藏左数据网格的滚动(红色),仍然可以滚动.
3. 同步两个数据网格的滚动(可能使用第三方代码).

在这里,我用angular2 +中的例子做了一个plunker.

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

谢谢你的每一个建议.

Answer 1

将它添加到您自己的组件样式时它不起作用的原因是该.datagrid-expandable-caret元素位于datagrid的shadow DOM中.有关更多说明,请参阅https://angular.io/guide/component-styles#view-encapsulation.

这意味着你有两个相同的解决方案:

1. 将这些样式放在全局CSS样式表中,以便它们可以应用于"模拟"阴影DOM.
2. 使用encapsulation: ViewEncapsulation.None您的组件来达到同样的效果.

以下是您的plunker的更新版本,显示第二个解决方案正在运行:https://plnkr.co/edit/ss3y1P？p = preview