方向性功能提供對雙向文字和佈局的支援。 您可以將 Spartacus 配置為使用從左到右 (LTR) 方向或從右到左 (RTL) 方向。

方向性是由語言驅動的。 許多語言是從左到右閱讀的，但有些語言，例如阿拉伯語和希伯來語，是從右到左閱讀的。

在 Spartacus 中，UI 的方向反映了主動語言，因此方向性可以在雙向體驗中起作用。 如果您的店面同時包含 LTR 和 RTL 語言，則使用活動語言自動檢測方向。

對 DOM 和 CSS 所做的更改被視為破壞性更改，因此只有在使用 2.1 功能標誌和 2.1 CSS 版本啟用它時才能使用方向性功能。 有關 CSS 版本的更多資訊，請參閱 CSS 架構中的樣式版本控制。

您可以使用 DirectionConfig 介面中的屬性配置方向性。 預設配置包含以下屬性：

```typescript
const defaultDirectionConfig: DirectionConfig = {
  direction: {
    detect: true,
    default: DirectionMode.LTR,
    rtlLanguages: ["he", "ar"],
  },
};
```

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

預設配置應該適用於大多數專案，但是如果您實現一個面向 RTL 的店面，您可能會考慮將預設方向更改為 RTL 並引入一些顯式的 LTR 語言。 下面是一個例子：

```typescript
ConfigModule.withConfig({
    direction: {
        default: DirectionMode.RTL,
        ltrLanguages: ['en'],
    },
} as DirectionConfig),
```

方向性的實現基於新增到 html 元素的 HTML5 dir 屬性，如下所示：

```html

...

```

dir 屬性可以新增到多個元素上，但是在 Spartacus 中，只新增了一個方向，那就是新增到 html 元素。 HTML dir 屬性然後將方向級聯到所有後代元素以及 CSS。

實際的文字和佈局方向由 CSS 驅動。 現代 CSS 模式和技術旨在在雙向設定中工作。 一個很好的例子是 Flexbox，它為佈局使用邏輯位置，例如“開始”和“結束”。 應該避免使用空間位置，例如“左”和“右”，因為它們不支援雙向佈局。

為了控制邊距和填充，樣式層是用邏輯屬性構建的。 邏輯屬性允許您編寫依賴於方向的 CSS 規則，而不是編寫面向空間的邊距和填充。 下面顯示了此類屬性的示例：

```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 配置提供應該向某個方向翻轉的圖示型別列表。 預設配置負責翻轉那些應該翻轉的圖示，如下所示：

```typescript
export const defaultIconConfig: IconConfig = {
  icon: {
    flipDirection: {
      CARET_RIGHT: DirectionMode.RTL,
      CARET_LEFT: DirectionMode.RTL,
    },
  },
};
```

什麼是 SAP Spartacus UI 的 direction 服務

相關文章