什么是 SAP Spartacus UI 的 direction 服务

方向性功能提供对双向文本和布局的支持。 您可以将 Spartacus 配置为使用从左到右 (LTR) 方向或从右到左 (RTL) 方向。

方向性是由语言驱动的。 许多语言是从左到右阅读的，但有些语言，例如阿拉伯语和希伯来语，是从右到左阅读的。

在 Spartacus 中，UI 的方向反映了主动语言，因此方向性可以在双向体验中起作用。 如果您的店面同时包含 LTR 和 RTL 语言，则使用活动语言自动检测方向。

对 DOM 和 CSS 所做的更改被视为破坏性更改，因此只有在使用 2.1 功能标志和 2.1 CSS 版本启用它时才能使用方向性功能。 有关 CSS 版本的更多信息，请参阅 CSS 架构中的样式版本控制。

您可以使用 DirectionConfig 界面中的属性配置方向性。 默认配置包含以下属性：

const defaultDirectionConfig: DirectionConfig = {

 direction: {

   detect: true,

   default: DirectionMode.LTR,

   rtlLanguages: ["he", "ar"],

 },

};

1

2

3

4

5

6

7

默认配置下，所有语言都映射到 LTR 方向，除了希伯来语 (he) 和阿拉伯语 (ar)。 可以通过配置添加其他 RTL 语言。

默认配置应该适用于大多数项目，但是如果您实现一个面向 RTL 的店面，您可能会考虑将默认方向更改为 RTL 并引入一些显式的 LTR 语言。 下面是一个例子：

ConfigModule.withConfig({

   direction: {

       default: DirectionMode.RTL,

       ltrLanguages: ['en'],

   },

} as DirectionConfig),

方向性的实现基于添加到 html 元素的 HTML5 dir 属性，如下所示：

 ...

dir 属性可以添加到多个元素上，但是在 Spartacus 中，只添加了一个方向，那就是添加到 html 元素。 HTML dir 属性然后将方向级联到所有后代元素以及 CSS。

实际的文本和布局方向由 CSS 驱动。 现代 CSS 模式和技术旨在在双向设置中工作。 一个很好的例子是 Flexbox，它为布局使用逻辑位置，例如“开始”和“结束”。 应该避免使用空间位置，例如“左”和“右”，因为它们不支持双向布局。

为了控制边距和填充，样式层是用逻辑属性构建的。 逻辑属性允许您编写依赖于方向的 CSS 规则，而不是编写面向空间的边距和填充。 下面显示了此类属性的示例：

.sample-1 {

 /* add a margin to the start of an element */

 margin-inline-start: 10px;

}

.sample-2 {

 /* add a padding to the end of an element */

 padding-inline-end: 10px;

8

关于图标

对于 RTL 语言，图标需要特别注意。 虽然大多数图标都是通用的，但不管方向如何，有些图标实际上必须翻转。 那些表示方向的图标通常需要翻转。 一个很好的例子是用于浏览产品轮播的图标。 一旦方向翻转，这些图标也应该翻转。

您可以使用flipDirection 配置提供应该向某个方向翻转的图标类型列表。 默认配置负责翻转那些应该翻转的图标，如下所示：

export const defaultIconConfig: IconConfig = {

 icon: {

   flipDirection: {

     CARET_RIGHT: DirectionMode.RTL,

     CARET_LEFT: DirectionMode.RTL,