什麼是 SAP Spartacus UI 的 direction 服務

方向性功能提供對雙向文本和布局的支援。 您可以将 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"],

 },

};

1

2

3

4

5

6

7

預設配置下，所有語言都映射到 LTR 方向，除了希伯來語 (he) 和阿拉伯語 (ar)。 可以通過配置添加其他 RTL 語言。

預設配置應該适用于大多數項目，但是如果您實作一個面向 RTL 的店面，您可能會考慮将預設方向更改為 RTL 并引入一些顯式的 LTR 語言。 下面是一個例子：

ConfigModule.withConfig({

   direction: {

       default: DirectionMode.RTL,

       ltrLanguages: ['en'],

   },

} as DirectionConfig),

方向性的實作基于添加到 html 元素的 HTML5 dir 屬性，如下所示：

 ...

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;

8

關于圖示

對于 RTL 語言，圖示需要特别注意。 雖然大多數圖示都是通用的，但不管方向如何，有些圖示實際上必須翻轉。 那些表示方向的圖示通常需要翻轉。 一個很好的例子是用于浏覽産品輪播的圖示。 一旦方向翻轉，這些圖示也應該翻轉。

您可以使用flipDirection 配置提供應該向某個方向翻轉的圖示類型清單。 預設配置負責翻轉那些應該翻轉的圖示，如下所示：

export const defaultIconConfig: IconConfig = {

 icon: {

   flipDirection: {

     CARET_RIGHT: DirectionMode.RTL,

     CARET_LEFT: DirectionMode.RTL,