UI5：如何从sap.m.IconTabFilter中删除图标？

Question

我正试图使我的应用程序具有响应性。对于小尺寸的显示器，我想去除 IconTabFilter 图标使用CSS。到现在为止，我都是在JS中检查用户代理，然后将图标手动添加到 IconTab 或省略它们）。

有没有办法用CSS隐藏图标标签中的图标？我正在使用媒体查询。

Answer 1

只要设置 text 的财产 IconTabFilter，并留下 icon 属性为空。然后你将拥有纯文本的IconTab。

请看 例子：我想让我的应用成为响应式的。

Answer 2

我正试图让我的应用成为响应式的。对于小尺寸的显示器，我想去除了 IconTabFilter 使用CSS的图标。

你可能不需要任何自定义的CSS规则。尝试利用 sap/ui/Device 模块代替。

1. 设置一个设备模型到应用程序。

   sap.ui.define([
     "sap/ui/core/UIComponent",
     "sap/ui/Device",
     "sap/ui/model/json/JSONModel",
     // ...
   ], function(UIComponent, Device, JSONModel/*, ...*/) {
     "use strict";
   
     return UIComponent.extend("demo", {
       metadata: { manifest: "json" },
       init: function() {
         UIComponent.prototype.init.apply(this, arguments);
         this._setDeviceModel("viewportSize");
         // ...
       },
   
       _setDeviceModel: function(modelName) {
         const model = new JSONModel(Device.resize, /*observe*/true); // true if the width can change during the runtime
         model.setDefaultBindingMode("OneWay");
         this.setModel(model, modelName);
         return this;
       },
   
     });
   });
   

2. 在视图中，结合 Device.resize.width 与 表达式结合:

   <IconTabFilter
     text="My Filter"
     icon="{= ${viewportSize>/width} > 500 ? 'sap-icon://something' : undefined }"
   />
   

如果视口宽度大于 x CSS像素，则应用图标。否则，没有图标，就像在下面的演示一样。此处.