APL Frame



APL Frame

Frameは1つの子を保持し、境界線と背景の色を持ちます。

プロパティ

Frameコンポーネントには、コンポーネントのプロパティのほかに次のプロパティがあります。Frameの定義にはheightwidthを必ず含めるようにします。

プロパティ 必須 スタイル設定 動的 説明
backgroundColor 背景の色です。デフォルトはtransparentです。
borderBottomLeftRadius ディメンション: プロパティ 左下の角丸の半径を指定します。borderRadiusよりも優先されます。
borderBottomRightRadius ディメンション: プロパティ 右下の角丸の半径を指定します。borderRadiusよりも優先されます。
borderColor 境界線の色です。デフォルトはtransparentです。
borderRadius ディメンション: プロパティ 角の丸い長方形の角の半径を指定します。デフォルトは0です。
borderTopLeftRadius ディメンション: プロパティ 左上の角丸の半径を指定します。指定した場合、borderRadiusよりも優先されます。
borderTopRightRadius ディメンション: プロパティ 右上の角丸の半径を指定します。指定した場合、borderRadiusよりも優先されます。
borderWidth 数値 境界線の幅です。デフォルトは0(境界線なし)です。
item コンポーネントとレイアウトの配列 子コンポーネントです。

backgroundColor

背景の色です。背景は、境界線の内側に表示されます。

borderRadius、borderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadius、borderTopRightRadius

境界線に適用する円の半径です。すべての半径は絶対値のディメンションで指定する必要があります。相対ディメンションはサポートされていません。Frameに境界線の半径を設定しても、Frameの子は切り抜かれません。

borderColor

境界線の色です。borderWidthを変えると(スタイルが適用されるために)Frameのコンテンツのサイズが変更されるため、スタイルの境界線を一時的に非表示にする場合には、通常はborderWidthを一定にしたままで、borderColortransparent(またはbackgroundColor)に設定してください。

borderWidth

境界線の幅です。境界線の幅は絶対値のディメンションで指定する必要があります。相対ディメンションはサポートされていません。境界線の幅はコンポーネントのパディングには影響しません。表示された境界線は、コンポーネントの背景と見なされ、コンポーネントのサイズや子の配置方法には影響しません。

item

子コンポーネントまたはレイアウトです。複数の子を指定した場合は、whenプロパティで選択された最初の子のみが使用されます。

Frameのサンプル

次のサンプルでは、背景が灰色の50 x 50 dpの円を作成し、円の中央にテキスト項目を配置します。

{
  "type": "Frame",
  "borderRadius": 25,
  "width": "50",
  "height": "50",  
  "backgroundColor": "grey",
  "item": {
    "type": "Text",
    "text": "2",
    "width": "50",
    "height": "50",
    "textAlign": "center",
    "textAlignVertical": "center"
  }
}