什么是 SAP Spartacus UI 的 direction 服务

举报
汪子熙 发表于 2022/09/04 15:32:21 2022/09/04
【摘要】 方向性功能提供对双向文本和布局的支持。 您可以将 Spartacus 配置为使用从左到右 (LTR) 方向或从右到左 (RTL) 方向。方向性是由语言驱动的。 许多语言是从左到右阅读的,但有些语言,例如阿拉伯语和希伯来语,是从右到左阅读的。在 Spartacus 中,UI 的方向反映了主动语言,因此方向性可以在双向体验中起作用。 如果您的店面同时包含 LTR 和 RTL 语言,则使用活动语言...

方向性功能提供对双向文本和布局的支持。 您可以将 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,
    },
  },
};
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。