UI5:如何从sap.m.IconTabFilter中删除图标?

问题描述 投票:2回答:2

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

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

css responsive-design sapui5
2个回答
2
投票

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

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


0
投票

我正试图让我的应用成为响应式的。对于小尺寸的显示器,我想去除了 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像素,则应用图标。否则,没有图标,就像在下面的演示一样。此处.

© www.soinside.com 2019 - 2024. All rights reserved.