关于sap:什么是-SAP-Spartacus-UI-的-direction-服务

46次阅读

共计 1436 个字符，预计需要花费 4 分钟才能阅读完成。

方向性功能提供对双向文本和布局的反对。您能够将 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"],
  },
};

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

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

ConfigModule.withConfig({
    direction: {
        default: DirectionMode.RTL,
        ltrLanguages: ['en'],
    },
} as DirectionConfig),

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

<html dir="ltr">
  ...
</html>

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;
}

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

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

export const defaultIconConfig: IconConfig = {
  icon: {
    flipDirection: {
      CARET_RIGHT: DirectionMode.RTL,
      CARET_LEFT: DirectionMode.RTL,
    },
  },
};

正文完