亚马逊 CodeCatalyst 不再向新买家开放。现有客户可以继续正常使用该服务。有关更多信息，请参阅 [如何从中迁移 CodeCatalyst](migration.md)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 向蓝图添加区域组件
<a name="region-comp-bp"></a>

可以将区域类型添加到自定义蓝图的 `Options` 界面，以便在蓝图向导中生成可输入一个或多个 AWS 区域的组件。可以从 `blueprint.ts` 文件中的基础蓝图导入区域类型。有关更多信息，请参阅 [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**
+ [Annotations](#region-annotations-bp)
+ [区域组件示例](#region-components-examples)

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

JSDoc 可以向`Options`界面的每个字段添加标签，以自定义字段在向导中的显示方式和行为。对于区域类型，支持以下标签：
+ `@displayName` 注释可用于在向导中更改字段的标签。

  示例：`@displayName AWS Region`
+ `@placeholder` 注释可用于更改选择/多选组件的占位符。

  示例：`@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 区域
<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']>[];
}
```