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

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    
このページは役に立ちましたか？