SAP Spartacus B2B 页面 info icon 设计 - 版本1.0
SAP 设计 版本 页面 Spartacus 1.0 INFO B2B
2023-09-14 09:02:54 时间
现在的做法:引入了新的section标签,包裹cx-icon和h3:
<cx-icon
[cxPopover]="listHint"
[cxPopoverOptions]="{
placement: 'auto',
class: 'my-company-popover',
appendToBody: true,
displayCloseButton: false
}"
[type]="iconTypes.INFO"
>
</cx-icon>
然后给这个section添加样式:
这个section确实需要吗?
section {
display: flex;
cx-icon {
align-self: flex-start;
margin-top: 4px;
color: var(--cx-color, var(--cx-color-info));
margin-inline-end: 1rem;
}
}
try avoid of unnecesary html layers (breaking changes) (is section required?)
原始的设计:
在detail header和detail children header,修改card可以同时覆盖这两处UI:
div class=title只影响这一小块区域:
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- SAP CRM Fiori 标准应用 My Account - search by ID 根据 ID 进行搜索的标准功能实现原理
- SAP Fiori里两种弹出对话框(popup dialog)设计
- SAP UI5和Vue的双向绑定比较
- SAP UI5 sap.ui.localResources函数调用的作用
- SAP CRM Service Order(服务订单)的状态字段设计原理介绍
- SAP S/4HANA Customer Management(CRM)模块的Partner模型设计
- 使用SAP PI和XIF Adapter将SAP CRM Opportunity同步到C4C系统
- SAP ABAP报表依赖设计原理详解
- SAP ABAP Netweaver系统的传输请求类型和原始系统的含义
- SAP 电商云 Spartacus UI 的 feature module 设计原理
- SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计
- SAP Spartacus 里对 isPlatformBrowser API 的使用
- 关于SAP Spartacus在服务器端渲染模式和SAP Commerce Cloud API白名单的问题
- SAP Spartacus User Form里checkbox的设计原理
- SAP Spartacus 重用组件cx-table的设计原理
- SAP Spartacus Org Unit明细页面的工具栏按钮设计
- Spartacus同SAP Commerce Cloud交互的示意图
- 那些年伴我一起成长的SAP装备
- SAP UI5应用DatePicker控件的设计明细
- SAP CRM CUSTOMER_H扩展字段的设计原理
- SAP CRM One Order框架里旧式的索引表设计原理
- SAP HANA里的情感分析实现的SQLScript代码
- 使用 cf push 部署应用到 SAP BTP 后启动失败 start unsuccessful 该如何处理
- 漫谈SAP产品里页面上的Checkbox设计与实现系列之一
- SAP Gateway 上的 Metadata Cache
- SAP Spartacus B2B 页面 info icon 设计 - 版本1.0