APL Frame(1.4)



APL Frame

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

プロパティ

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

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

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

Frameソースまたはイベントのターゲットである場合、event.sourceまたはevent.targetに次の値が報告されます。

{
  // Frame固有の値
  "type": "Frame",

  // 一般的なコンポーネントの値
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス
  "checked": Boolean,  // チェックの状態
  "disabled": Boolean, // 無効化の状態
  "focused": Boolean,  // フィーカス状態
  "height": Number,    // コンポーネントのdp単位の高さ(パディングを含む)
  "id": ID,            // コンポーネントのID
  "opacity": Number,   // コンポーネントの不透明度[0~1]
  "pressed": Boolean,  // 押された状態
  "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
  "width": Number      // コンポーネントのdp単位の幅(パディングを含む)
}

backgroundColor

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

borderRadiusプロパティ

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

borderRadiusプロパティを使用すると、すべての角にこの値を1回設定できます。FrameのコーナーごとにborderRadiusを個別にオーバーライドできます。

  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderTopLeftRadius
  • borderTopRightRadius

borderColor

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

borderStrokeWidth

Frameの周りに描画された境界線の幅。指定しない場合、borderStrokeWidthは既定で指定されたborderWidthに設定されます。指定すると、描画される境界線の実際の幅は、borderStrokeWidthborderWidthのより小さい値になります。境界線の幅の外側に境界線を描画することはできません。

親内のコンポーネントの位置を再レイアウトせずに、描画された境界線の幅を変更する場合は、このプロパティをborderWidthとは別に設定します。たとえば、borderWidth10に設定し、borderStrokeWidth5に設定したとします。コンポーネントは5ピクセルの境界線で表示されますが、ビューポートで10ピクセルの境界線に相当する十分なスペースを確保します。borderStrokeWidth10に変更すると、コンポーネントが占有するスペースを変更せずに、コンポーネントは10ピクセルの境界線で表示されます。

これに対し、borderWidth を単独で使用して5から10に変更すると、画面に表示されるコンポーネントが幅の広い境界線に合わせて変動します。

borderWidth

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

item, items

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

Frameのサンプル

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

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