APLスタイル設定可能プロパティ



APLスタイル設定可能プロパティ

スタイル設定可能プロパティは、スタイルで設定できるコンポーネントプロパティです。ドキュメントのstylesセクションで定義したスタイルでプロパティの値を設定し、コンポーネントの配置時にそのスタイル名を使用できます。

スタイル設定可能プロパティの設定例

colortextAligntextAlignVerticalfontStylefontSizeの各プロパティは、すべてスタイル設定可能プロパティです。これらのプロパティを設定するスタイルは、次のように定義できます。

{
  "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 文字列(invisiblenonenormal コンポーネントが画面に表示されるかどうかを指定します。
fontFamily 文字列 フォントファミリーです(「Amazon Ember Display」など)。
fontSize 絶対ディメンション テキストのサイズです。
fontStyle normalitalic 表示するフォントスタイルです。
fontWeight normalbold、100、200、300、400、500、600、700、800、900 表示するフォントの太さです。
letterSpacing 絶対ディメンション 文字間に追加するスペースです。
lineHeight 数値(パーセント) 行の高さの乗数です。
maxLines 整数 表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。
opacity 数値 このコンポーネントと子の不透明度です。
overlayColor 設定すると画像の上にテーマに合ったレイヤーが重ねて表示されます。これにより、画像上に配置したテキストを読みやすくできます。
overlayGradient グラデーション 画像にオーバーレイするカラーグラデーションです。
textAlign autoleftrightcenter 段落内でのテキストの配置です。
textAlignVertical autotopbottomcenter テキストの垂直方向の配置です。

コンポーネントへのスタイル設定可能プロパティのマッピング

スタイル設定可能プロパティは、次のコンポーネントで使用できます。displayopacityComponentの共通のプロパティであるため、すべてのコンポーネントで利用できます。

プロパティ 画像 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