Amazon CodeCatalyst 不再向新客戶開放。現有客戶可以繼續正常使用該服務。如需詳細資訊，請參閱[如何從 CodeCatalyst 遷移](migration.md)。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將區域元件新增至藍圖
<a name="region-comp-bp"></a>

區域類型可以新增至自訂藍圖的`Options`界面，以在藍圖精靈中產生元件，您可以輸入一或多個 AWS gions。您可以從 `blueprint.ts` 檔案的基礎藍圖匯入 gion 類型。如需詳細資訊，請參閱 [AWS 區域](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/)。

**匯入 Amazon CodeCatalyst 藍圖區域類型**

在您的 `blueprint.ts`檔案中，新增下列項目：

```
import { Region } from '@amazon-codecatalyst/blueprints.blueprint'
```

區域類型參數是可選擇的 AWS 區域代碼陣列，您也可以使用 `*` 來包含所有支援的 AWS 區域。

**Topics**
+ [註釋](#region-annotations-bp)
+ [區域元件範例](#region-components-examples)

## 註釋
<a name="region-annotations-bp"></a>

JSDoc 標籤可新增至`Options`界面中的每個欄位，以自訂欄位在精靈中的顯示和行為方式。對於區域類型，支援下列標籤：
+ `@displayName` 註釋可用於在精靈中變更欄位的標籤。

  範例：`@displayName AWS Region`
+ `@placeholder` 註釋可用來變更 Select/multiselect 元件的預留位置。

  範例：`@placeholder Choose AWS Region`

## 區域元件範例
<a name="region-components-examples"></a>

### 從指定的清單中選擇區域
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>;
}
```

### 從指定的清單中選擇一或多個區域
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

### 選擇一個 AWS egion
<a name="region-one-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['*']>;
}
```

### 從指定的清單中選擇一或多個區域
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```