什么是 SAP Spartacus UI 的 direction 服务
方向性功能提供對雙向文本和布局的支持。 您可以將 Spartacus 配置為使用從左到右 (LTR) 方向或從右到左 (RTL) 方向。
方向性是由語言驅(qū)動的。 許多語言是從左到右閱讀的，但有些語言，例如阿拉伯語和希伯來語，是從右到左閱讀的。
在 Spartacus 中，UI 的方向反映了主動語言，因此方向性可以在雙向體驗中起作用。 如果您的店面同時包含 LTR 和 RTL 語言，則使用活動語言自動檢測方向。
對 DOM 和 CSS 所做的更改被視為破壞性更改，因此只有在使用 2.1 功能標志和 2.1 CSS 版本啟用它時才能使用方向性功能。 有關(guān) CSS 版本的更多信息，請參閱 CSS 架構(gòu)中的樣式版本控制。
您可以使用 DirectionConfig 界面中的屬性配置方向性。 默認配置包含以下屬性：
const defaultDirectionConfig: DirectionConfig = {direction: {detect: true,default: DirectionMode.LTR,rtlLanguages: ["he", "ar"],}, };默認配置下，所有語言都映射到 LTR 方向，除了希伯來語 (he) 和阿拉伯語 (ar)。 可以通過配置添加其他 RTL 語言。
默認配置應(yīng)該適用于大多數(shù)項目，但是如果您實現(xiàn)一個面向 RTL 的店面，您可能會考慮將默認方向更改為 RTL 并引入一些顯式的 LTR 語言。 下面是一個例子：
ConfigModule.withConfig({direction: {default: DirectionMode.RTL,ltrLanguages: ['en'],}, } as DirectionConfig),方向性的實現(xiàn)基于添加到 html 元素的 HTML5 dir 屬性，如下所示：
<html dir="ltr">... </html>dir 屬性可以添加到多個元素上，但是在 Spartacus 中，只添加了一個方向，那就是添加到 html 元素。 HTML dir 屬性然后將方向級聯(lián)到所有后代元素以及 CSS。
實際的文本和布局方向由 CSS 驅(qū)動。 現(xiàn)代 CSS 模式和技術(shù)旨在在雙向設(shè)置中工作。 一個很好的例子是 Flexbox，它為布局使用邏輯位置，例如“開始”和“結(jié)束”。 應(yīng)該避免使用空間位置，例如“左”和“右”，因為它們不支持雙向布局。
為了控制邊距和填充，樣式層是用邏輯屬性構(gòu)建的。 邏輯屬性允許您編寫依賴于方向的 CSS 規(guī)則，而不是編寫面向空間的邊距和填充。 下面顯示了此類屬性的示例：
.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; }關(guān)于圖標
對于 RTL 語言，圖標需要特別注意。 雖然大多數(shù)圖標都是通用的，但不管方向如何，有些圖標實際上必須翻轉(zhuǎn)。 那些表示方向的圖標通常需要翻轉(zhuǎn)。 一個很好的例子是用于瀏覽產(chǎn)品輪播的圖標。 一旦方向翻轉(zhuǎn)，這些圖標也應(yīng)該翻轉(zhuǎn)。
您可以使用flipDirection 配置提供應(yīng)該向某個方向翻轉(zhuǎn)的圖標類型列表。 默認配置負責翻轉(zhuǎn)那些應(yīng)該翻轉(zhuǎn)的圖標，如下所示：
export const defaultIconConfig: IconConfig = {icon: {flipDirection: {CARET_RIGHT: DirectionMode.RTL,CARET_LEFT: DirectionMode.RTL,},}, };總結(jié)
以上是生活随笔為你收集整理的什么是 SAP Spartacus UI 的 direction 服务的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 奶妈一级太阳等于多少智力
- 下一篇： iframe 在 SAP 三款产品中的三