Question

我正在尝试让我的应用响应。对于小型显示器，我想使用CSS删除IconTabFilter图标。到目前为止，我正在检查JS中的用户代理并手动将图标添加到IconTab（或省略它们）。

有没有办法使用css隐藏图标选项卡中的图标？

Answer 1

只需设置IconTabFilter的text属性并将icon属性设置为空。然后你将拥有纯文字IconTab。

请参阅example.

Answer 2

我正在尝试使我的应用程序具有响应能力。对于小型显示器，我想使用CSS删除IconTabFilter图标。

您可能不需要任何自定义CSS规则。尝试改用sap/ui/Device模块：

为应用设置设备型号：

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;
    },

  });
});

在视图中，将Device.resize.width与表达式绑定结合使用：

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

如果视口宽度大于 x CSS像素，则将应用该图标。否则，将没有here中演示的图标。

如何使用css删除IconTabFilter图标？

2 个答案: