头图

什么是 SAP Spartacus UI 的 direction 服务

JerryWang_汪子熙

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

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

784 声望
1k 粉丝
0 条评论

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

784 声望
1k 粉丝
文章目录
宣传栏