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

什么是 SAP Spartacus UI 的 direction 服务相关推荐

如何找到SAP Spartacus UI可以扩展的outlet
Spartacus两种outlet: CMS data driven outlet software driven outlet 文件位置: C:\Code\SPA\spartacus\project ...
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
首先确认你已经熟悉这篇文章的启动方式:SAP Spartacus develop branch 的服务器端渲染启动方式. 第一步添加一个新的 build script,把 --configurati ...
SAP Spartacus UI Duplicated keys has been found in the config of i18n chunks
在测试 SAP Spartacus 3.4.5 版本的 SSR 功能时,发现一个 warning 信息: console.warn(`Duplicated keys has been found in ...
什么是 SAP Spartacus UI 的 code deprecation
对于复杂且快速发展的库,在改进现有功能的同时保持向后兼容性可能具有挑战性. 代码弃用允许您正确标记过时的代码,并通过警告用户,帮助他们过渡到更好的替代方案. 要将函数.类.方法或属性标记为已弃用,请使 ...
什么是 SAP Spartacus UI 的 feature level
Spartacus 库的每个次要版本都包含新功能,这些功能通常是对现有组件的改进. 这些功能通常是用户所期望的,但在某些情况下,这些更新可能被视为破坏性更改,尤其是当您在特定行为或 DOM 结构之上构 ...
关于 SAP Spartacus UI 框架选型问题
原文目前我们选择的 UI 框架已经污染了所有的 UI 组件.这对不使用或不能使用引导程序的客户来说是不利的.我们希望我们的 UI 层独立于特定的 UI 框架.此外,我们应该避免像 bootstrap ...
SAP Spartacus UI TabParagraphContainerComponent 的工作原理
首先渲染若干个 div button,个数等于 TabContainer 里包含的 Component 元素个数. 然后是利用 cxComponentWrapper 加载真实的 Component. ...
SAP Spartacus UI ConfigurableRoutesService router.resetConfig 的调用逻辑
在该 service 的 init 方法里,有如下的代码调用: protected configure(): void {// Router could not be injected in cons ...
为什么 SAP 电商云 Spartacus UI SSR 模式下的客户端应用，不会发起 product 请求
我们如果通过 CSR 即 Client Side Render 的方式启动 SAP Spartacus UI,可以在 Chrome 开发者工具里观测到 Product Carousel 对应的产品主数 ...

什么是 SAP Spartacus UI 的 direction 服务

关于图标

什么是 SAP Spartacus UI 的 direction 服务相关推荐

最新文章

热门文章