关于javascript:SAP-电商云-Spartacus-UI-的-style-library-介绍

43次阅读

共计 2146 个字符,预计需要花费 6 分钟才能阅读完成。

Spartacus 我的项目的 angular.json 的 projects 节点上面,并没有和 style 相干的记录:

build 里也同样没有:

这个 Storefrontstyles

这个 storefrontstyles 文件夹下的 package.json 里定义了 hamburgers 的依赖。

style library 名称:@spartacus/styles

作为 peerDependencies 被其余 feature library 援用:

全部内容能够被其余 project 采纳 @import 导入:

Configuring styling

Spartacus 提供了两种款式自定义办法。首先,能够通过提供自定义主题来更改站点的全局外观。其次,Spartacus 提供了一种称为灵便款式,Flexible Styling 的机制,它容许在组件级别更改款式。

theming

Spartacus 中的主题是指网站的全局外观。这包含(但不限于)色彩、字体和字体大小。通过从新设置 Spartacus 的主题,能够创立一个具备您本人的自定义品牌和身份的网站。

Spartacus 在 @spartacus/styles 包中提供了一个名为 Sparta 的默认款式库。这个包应该通过 styles.scss 文件导入到您的我的项目中。

如下图所示:

有三种可能的形式来个性化 Spartacus 的主题。

笼罩全局变量

默认的 Sparta 主题提供了大量的变量,能够笼罩这些变量来自定义主题。这些变量蕴含在 @spartacus/styles/scss/theme/sparta/_variables 中。为了给 scss 变量调配一个新值,变量中的值必须在库导入之前重新分配。

例子:

$primary: #e502bf
$font-weight-normal: 500;

@import '~@spartacus/styles/index';

Extending Sparta theme

当变量没有提供足够的配置选项但您心愿重用 Sparta 的某些款式时,扩大 Sparta 主题很有用。

能够通过创立新库并导入默认主题来扩大库。具体步骤如下:

创立一个新的 theme library:

custom-styles/index.scss

而后在外面导入 default theme:

@import '~@spartacus/styles/index';

// Custom Style or imports from other files

最初,在我的项目的 styles.scss 外面,导入自定义 theme library:

@import 'custom-styles/index.scss';

另一种办法是创立一个新库,并在默认主题之后导入到我的项目中。

@import '~@spartacus/styles/index';
@import 'custom-styles/index.scss';

Creating a brand new theme library

这种形式的主题笼罩是齐全省略默认款式导入。

因而,必须复制 Sparta 中存在的所有类和变量(能够批改),或者必须从我的项目中删除它们的应用。

Flexible styling

对于更细粒度的定制,能够间接影响每个组件的款式。每个组件的款式中内置了一组能够被笼罩的自定义属性(css 变量)。这些变量能够从浏览器的查看器中查看。

以下过程将演示更新组件款式的步骤。

  1. 应用浏览器的查看器工具找到组件的选择器。
  2. 应用查看器查看组件的标记和可用变量。
  3. 在您抉择的文件中编写自定义 SCSS(必须通过规范 Angular/SCSS 构建蕴含在构建中)。自定义款式必须遵循这些规定。
  • 援用组件是通过它们的选择器实现的,例如 cx-product-images
  • 它必须笼罩默认类和规定
  • 规定可通过 css 变量自定义

以下示例代码演示了 product image componentthumb 的配置。

默认:

:host {
  display: flex;
  flex-direction: var(--cx-flex-direction, column);
}

.thumbs {
  display: flex;
  justify-content: flex-start;
  [...]
}

自定义:

cx-product-images {
  --cx-flex-direction: row-reverse;
  justify-content: flex-end;

  .thumbs {flex-direction: column;}
}

能够将自定义 SCSS 间接写入应用程序的 style.scss 文件或应用程序中蕴含的任何其余样式表中。

来自自定义 SCSS 的规定 不会 笼罩默认规定。Spartacus 中曾经存在的规定能够应用自定义属性笼罩。

例如上面是 Spartacus 规范的 rule:

cx-cart {
  .container {margin: var(--cx-margin, 0);
  }
}

以下代码不会批改 margin 属性,但会更改 display 成果。

cx-cart {
  .container {
    display: inline-block;
    margin: 0 10px;
  }
}

下列代码会同时笼罩 margindisplay 属性:

cx-cart {
  .container {
    display: inline-block;
    --cx-margin: 0 10px;
  }
}

正文完
 0