SAP Spartacus popover Component css 的重用设计

按照需求，我们需要在SAP Spartacus B2B 页面的 List header 和Card header两处，同时显示info icon，因此，有必要设计一个统一的icon style，然后在List header和Card header这两处，通过@extend语法直接引用 icon style:

这两处的icon都共享同样的css 样式，定义在_list.scss文件里：

%organizationTitle {.title {h3 {button {border: none;background-color: inherit;cx-icon {pointer-events: none;color: var(--cx-color, var(--cx-color-info));}}}}
}

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus popover Component css 的重用设计相关推荐

SAP Spartacus popover Component 的单元测试
我们在SAP Spartacus B2B Page 的 list和Card页面,点击(i) icon之后,会看到一个popover Component,可以通过下面的选择器访问: cx-popover ...
Subject 在 SAP Spartacus Popover Component 中的应用
Subject 是 Rxjs 里的一个工具对象. Subject 是一种特殊类型的 Observable,它允许将值多播到许多观察者. Subject 就像 EventEmitters. 每个 Sub ...
Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用
要绑定到事件,请使用 Angular 的事件绑定语法.此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成.在下面的示例中,目标事件名是 click ,模板语句是 onSave() . < ...
SAP Spartacus Popover Component 显示与否的逻辑判定
本文同这个 Github issue 相关. Directive 8023 created 6348 Directive created 回车,6348 创建 7054 Component 点击use ...
SAP Spartacus List Component 里定义的待显示 Popover 内容，如何传递到 Popover Component 里的？
中心思想:这个传递以 Popover Directive 为桥梁. PopoverComponent里的 content 属性: string 或者 TemplateRef,后者是 ng-templa ...
SAP Spartacus Popover Directive 构造函数的用途分析
该构造函数位于文件 popover.directive.ts 里: 第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directiv ...
SAP Spartacus Breadcrumbs Component的显示问题讨论
如果把Storefront.component.html里position为BottomHeaderSlot改成其他名称: 按照其注释写到: position是用于为指定的page slot定位CMS ...
如何替换SAP Spartacus启动Component -app-root
在SAP Spartacus app.module.ts里,随便定义一个简单的Component: @Component({selector: "app-root",templat ...
SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...

SAP Spartacus popover Component css 的重用设计

SAP Spartacus popover Component css 的重用设计相关推荐

最新文章

热门文章