FilterBar控件上的双点是什么？如何移除该双点？

嘿，我来帮你搞清楚这个双点的问题！

这个双点到底是什么？ #

那个双点是FilterBar控件默认的标签分隔符。当你使用的FilterGroupItem没有设置label属性，而你嵌套的控件（比如这里的DatePicker）又存在默认标签逻辑时，FilterBar会自动插入这个分隔符，用来区分分组和控件的标签。不过在你的场景里，因为用了sap.ui.comp.filterbar.FilterBar.INTERNAL_GROUP这个内部分组，又没给FilterGroupItem指定label，就出现了这个多余的双点。

怎么移除它？ #

给你几个实用的解决办法：

• 给FilterGroupItem添加空label属性：最简单的方式就是给FilterGroupItem加上label=""，这样FilterBar就不会自动生成分隔符了。修改后的代码如下：

<fb:FilterBar> 
  <fb:filterGroupItems> 
    <fb:FilterGroupItem 
      groupName="sap.ui.comp.filterbar.FilterBar.INTERNAL_GROUP" 
      name="Basic" 
      visibleInFilterBar="true"
      label="" <!-- 新增空label -->
    > 
      <fb:control> 
        <DatePicker/> 
      </fb:control> 
    </fb:FilterGroupItem> 
  </fb:filterGroupItems> 
</fb:FilterBar>

• 通过CSS隐藏分隔符：如果不想改动XML结构，可以自定义CSS来隐藏这个分隔符元素：

.sapUiCompFilterBar .sapUiCompFilterBarLabelSeparator {
    display: none !important;
}

• 隐藏嵌套控件的标签：如果你的DatePicker本身不需要显示标签，可以给它设置displayLabel="false"，这样FilterBar也不会触发分隔符的生成：

<fb:control> 
  <DatePicker displayLabel="false"/> 
</fb:control>

内容的提问来源于stack exchange，提问作者softshipper