方向性功能提供对双向文本和布局的支持。 您可以将 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,
},
},
};
网友评论