APL Frame



APL Frame

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

プロパティ

Frameコンポーネントには、コンポーネントプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください

Frameの定義にはheightwidthを必ず含めるようにします。

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

Frameイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効な場合はtrue
    "id": ID,            // コンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "height": Number,    // コンポーネントの高さ(dp単位)(パディングを含む)
    "opacity": Number,   // コンポーネントの不透明度[0~1]
    "width": Number      // コンポーネントの幅(dp単位)(パディングを含む)
  }
}

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"
  }
}