APLスタイル設定可能プロパティ
スタイル設定可能プロパティとは、スタイルに設定できるコンポーネントプロパティです。ドキュメントのstylesセクションで定義したスタイルにプロパティの値を設定し、そのスタイル名を、ドキュメント内のコンポーネントのstyleプロパティに割り当てることができます。
スタイル設定可能プロパティ
| プロパティ | 型 | 説明 | 適用されるコンポーネント |
|---|---|---|---|
|
|
アクションの配列 |
複雑なタッチ操作に相当するプログラムです。 | |
|
|
配置 |
ボックス内での画像の配置を指定します。 |
|
|
|
次のいずれか： |
交差軸における子の配置です。 | |
|
|
背景として使用する色またはグラデーションです。 | ||
|
|
背景の色です。 | ||
|
|
絶対ディメンション |
左下の角丸の半径を指定します。 | |
|
|
絶対ディメンション |
右下の角丸の半径を指定します。 | |
|
|
境界線の色です。 | ||
|
|
絶対ディメンション |
角の丸い長方形の角の半径を指定します。 | |
|
|
負でない絶対ディメンション |
テキストボックスを囲む境界線の幅です。 | |
|
|
絶対ディメンション |
左上の角丸の半径を指定します。指定した場合、 | |
|
|
絶対ディメンション |
右上の角丸の半径を指定します。指定した場合、 | |
|
|
数値 |
境界線の幅です。 | |
|
|
テキストの色です。 | ||
|
|
次のいずれか： |
子コンポーネントを表示する方向です。 | |
|
|
文字列（ |
コンポーネントを画面に表示するかどうかを決定します。 | |
|
|
文字列 |
フォントファミリーです（「Amazon Ember Display」など）。 | |
|
|
絶対ディメンション |
テキストのサイズです。 | |
|
|
|
表示するフォントスタイルです。 | |
|
|
|
表示するフォントの太さです。 | |
|
|
正のディメンション |
コンポーネントに指定する高さです。 | |
|
|
選択したテキストの背後に表示するハイライト色です。 | ||
|
|
文字列 |
テキストが入力されていないときに表示されるヒントテキストです。 | |
|
|
ヒントテキストの色です。 | ||
|
|
normal、italic |
ヒントのフォントスタイルです。 | |
|
|
normal、bold、100、200、300、400、500、600、700、800、900 |
ヒントのフォントの太さです。 | |
|
|
次のいずれか： |
主軸上にスペースが余っているときの、スペースの配置方法を指定します。デフォルトは | |
|
|
KeyboardType |
ユーザーがコンポーネントを選択したときに表示されるキーボードの種類です。 | |
|
|
絶対ディメンション |
文字間に追加するスペースです。 | |
|
|
数値（パーセンテージ） |
行の高さの乗数です。 | |
|
|
正のディメンション |
このコンポーネントに許容される最大の高さです。 | |
|
|
正のディメンション |
このコンポーネントに許容される最大の幅です。 | |
|
|
負でない数値 |
ユーザーが編集ボックスに入力できる最大文字数です。 | |
|
|
整数 |
表示するテキストの最大行数です。指定された行数にテキストが収まらない場合、コンポーネントはコンテンツを切り詰めて省略記号を表示します。 | |
|
|
負でないディメンション |
このコンポーネントに許容される最小の高さです。 | |
|
|
負でないディメンション |
このコンポーネントに許容される最小の幅です。 | |
|
|
数値 |
このコンポーネントと子の不透明度です。 | |
|
|
設定すると、画像の上にテーマに合わせたオーバーレイ（スクリム）が重ねて表示されます。これにより、画像の上に配置されたテキストを読みやすくできます。 | ||
|
|
画像にオーバーレイとして追加する色のグラデーションです。 | ||
|
|
負でない絶対ディメンションの配列 |
コンポーネントの両側に追加するスペースです。 | |
|
|
負でない絶対ディメンション |
このコンポーネントの下部に追加するスペースです。 | |
|
|
負でない絶対ディメンション |
このコンポーネントの左側に追加するスペースです。 | |
|
|
負でない絶対ディメンション |
このコンポーネントの右側に追加するスペースです。 | |
|
|
負でない絶対ディメンション |
このコンポーネントの上部に追加するスペースです。 | |
|
|
文字列 |
コンポーネントの役割または目的です。 | |
|
|
スケール |
バウンディングボックスに収まるように画像またはベクターグラフィックのサイズを調整する方法を指定します。 |
|
|
|
ブール値 |
trueの場合、入力された文字を隠します。 | |
|
|
ブール値 |
trueの場合、 | |
|
|
影の色です。 | ||
|
|
影の水平方向のオフセットです。 | ||
|
|
負でない絶対ディメンション |
影のぼかしの半径です。 | |
|
|
影の垂直方向のオフセットです。 | ||
|
|
正の整数 |
表示するおおよその文字数を指定します。 | |
|
|
次のいずれか： |
スクロールの停止時に子コンポーネントをスナップする位置を指定します。 |
|
|
|
SubmitKeyType |
リターンキーの種類です。指定されたキーが | |
|
|
|
段落内でのテキストの配置です。 | |
|
|
|
テキストの垂直方向の配置です。 | |
|
|
文字列 |
入力できる文字を制限します。 | |
|
|
正のディメンション |
このコンポーネントに指定する幅です。 | |
|
|
次のいずれか： |
子コンポーネントを複数の行にラップする方法を指定します。 |
スタイル設定可能プロパティの設定例
次の例は、5つのプロパティを設定するcaptionTextというスタイルを示しています。
colortextAligntextAlignVerticalfontStylefontSize
{
"styles": {
"captionText": {
"values": [
{
"textAlign": "center",
"textAlignVertical": "center",
"color": "red",
"fontStyle": "italic",
"fontSize": "@fontSizeMedium"
}
]
}
}
}
このスタイルを使用するには、スタイル名であるcaptionTextをコンポーネントのstyleプロパティに割り当てます。次の例では、captionTextで定義された5つのプロパティをTextコンポーネントに設定します。このコードにより、テキストが上下左右の中央に配置された赤い斜体のテキストブロックが作成されます。
{
"type": "Text",
"paddingLeft": "@spacingSmall",
"paddingRight": "@spacingSmall",
"text": "Image: ${imageCaption}",
"style": "captionText"
}
関連トピック
最終更新日: 2025 年 11 月 19 日