我正试图使我的应用程序具有响应性。对于小尺寸的显示器,我想去除 IconTabFilter
图标使用CSS。到现在为止,我都是在JS中检查用户代理,然后将图标手动添加到 IconTab
或省略它们)。
有没有办法用CSS隐藏图标标签中的图标?我正在使用媒体查询。
只要设置 text
的财产 IconTabFilter
,并留下 icon
属性为空。然后你将拥有纯文本的IconTab。
我正试图让我的应用成为响应式的。对于小尺寸的显示器,我想去除了
IconTabFilter
使用CSS的图标。
你可能不需要任何自定义的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像素,则应用图标。否则,没有图标,就像在下面的演示一样。此处.