APL Frame

Note: Sign in to the developer console to build or publish your skill.

APL Frame

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

プロパティ

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

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

プロパティ	型	デフォルト	スタイル設定	動的	説明
`backgroundColor`	色	none	◯	◯	背景の色です。
`borderBottomLeftRadius`	負でない絶対ディメンション	none	◯	◯	左下の角丸の半径を指定します。`borderRadius`よりも優先されます。
`borderBottomRightRadius`	負でない絶対ディメンション	none	◯	◯	右下の角丸の半径を指定します。`borderRadius`よりも優先されます。
`borderColor`	色	none	◯	◯	境界線の色です。
`borderRadius`	負でない絶対ディメンション	0	◯	◯	角の丸い長方形の角の半径を指定します。
`borderStrokeWidth`	負でない絶対ディメンション	`borderWidth`	◯	◯	境界線の幅です。
`borderTopLeftRadius`	負でない絶対ディメンション	none	◯	◯	左上の角丸の半径を指定します。指定した場合、`borderRadius`よりも優先されます。
`borderTopRightRadius`	負でない絶対ディメンション	none	◯	◯	右上の角丸の半径を指定します。指定した場合、`borderRadius`よりも優先されます。
`borderWidth`	負でない絶対ディメンション	0	◯	◯	境界線の幅です。
`item`、`items`	`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を一定にしたままで、borderColorをtransparent（またはbackgroundColor）に設定してください。

borderStrokeWidth

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

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

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2021 年 10 月 22 日