APLスタイル設定可能プロパティ
Note: Sign in to the developer console to build or publish your skill.
APLスタイル設定可能プロパティ
スタイル設定可能プロパティは、スタイルで設定できるコンポーネントプロパティです。ドキュメントのstyles
セクションで定義したスタイルでプロパティの値を設定し、コンポーネントの配置時にそのスタイル名を使用できます。
スタイル設定可能プロパティの設定例
color
、textAlign
、textAlignVertical
、fontStyle
、fontSize
の各プロパティは、すべてスタイル設定可能プロパティです。これらのプロパティを設定するスタイルは、次のように定義できます。
{
"styles": {
"captionText": {
"values": [
{
"textAlign": "center",
"textAlignVertical": "center",
"color": "red",
"fontStyle": "italic",
"fontSize": "@fontSizeMedium"
}
]
}
}
}
スタイルを使用するには、スタイル名captionText
をコンポーネントのstyle
プロパティに割り当てます。これにより、Text
コンポーネントのcaptionText
で定義されているプロパティが設定されます。
{
"type": "Text",
"paddingLeft": "@spacingSmall",
"paddingRight": "@spacingSmall",
"text": "Image: ${imageCaption}",
"style": "captionText"
}
上記のコードでは、テキストが垂直方向と水平方向の両方に中央揃えされた、赤字の斜体テキストブロックを作成します。
スタイルを設定可能なプロパティ
プロパティ | 型 | 説明 |
---|---|---|
align |
配置 | ボックス内での画像の配置を指定します。 |
backgroundColor |
色 | 背景の色です。 |
borderBottomLeftRadius |
絶対ディメンション | 左下の角丸の半径を指定します。borderRadius よりも優先されます。 |
borderBottomRightRadius |
絶対ディメンション | 右下の角丸の半径を指定します。borderRadius よりも優先されます。 |
borderColor |
色 | 境界線の色です。 |
borderRadius |
絶対ディメンション | 角の丸い長方形の角の半径を指定します。 |
borderTopLeftRadius |
絶対ディメンション | 左上の角丸の半径を指定します。指定した場合、borderRadius よりも優先されます。 |
borderTopRightRadius |
絶対ディメンション | 右上の角丸の半径を指定します。指定した場合、borderRadius よりも優先されます。 |
borderWidth |
数値 | 境界線の幅です。 |
color |
色 | テキストの色です。 |
display |
文字列(invisible 、none 、normal ) |
コンポーネントが画面に表示されるかどうかを指定します。 |
fontFamily |
文字列 | フォントファミリーです(「Amazon Ember Display」など)。 |
fontSize |
絶対ディメンション | テキストのサイズです。 |
fontStyle |
normal 、italic |
表示するフォントスタイルです。 |
fontWeight |
normal 、bold 、100、200、300、400、500、600、700、800、900 |
表示するフォントの太さです。 |
letterSpacing |
絶対ディメンション | 文字間に追加するスペースです。 |
lineHeight |
数値(パーセント) | 行の高さの乗数です。 |
maxLines |
整数 | 表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。 |
opacity |
数値 | このコンポーネントと子の不透明度です。 |
overlayColor |
色 | 設定すると、画像の上にテーマに合ったレイヤーが重ねて表示されます。これにより、画像上に配置したテキストを読みやすくできます。 |
overlayGradient |
グラデーション | 画像にオーバーレイするカラーグラデーションです。 |
textAlign |
auto 、left 、right 、center |
段落内でのテキストの配置です。 |
textAlignVertical |
auto 、top 、bottom 、center |
テキストの垂直方向の配置です。 |
コンポーネントへのスタイル設定可能プロパティのマッピング
スタイル設定可能プロパティは、次のコンポーネントで使用できます。display
とopacity
はComponent
の共通のプロパティであるため、すべてのコンポーネントで利用できます。
プロパティ | Image | Text | Frame | VectorGraphic |
---|---|---|---|---|
align |
X | X | ||
backgroundColor |
X | |||
borderBottomLeftRadius |
X | |||
borderBottomRightRadius |
X | |||
borderColor |
X | |||
borderRadius |
X | X | ||
borderTopLeftRadius |
X | |||
borderTopRightRadius |
X | |||
borderWidth |
X | |||
color |
X | |||
display |
X | |||
fontFamily |
X | |||
fontSize |
X | |||
fontStyle |
X | |||
fontWeight |
X | |||
letterSpacing |
X | |||
lineHeight |
X | |||
maxLines |
X | |||
opacity |
||||
overlayColor |
X | |||
overlayGradient |
X | |||
textAlign |
X | |||
textAlignVertical |
X |