APL Frame

---

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

プロパティ

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

Frameの定義にはheightとwidthを含めてください。

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

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

background

Frameの背景を塗りつぶす色またはグラデーションです。背景は境界線の内側に表示されます。

次の例では、グラデーションの背景が適用されたボックスを表示します。

---

backgroundColor

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

borderRadiusプロパティ

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

borderRadiusプロパティを使用すると、すべての角に一度にこの値を設定できます。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ピクセルの境界線で表示されますが、Viewport上には10ピクセルの境界線分のスペースが確保されます。borderStrokeWidthを10に変更すると、コンポーネントは確保するスペースを変更することなく、10ピクセルの境界線で表示されます。

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

borderWidth

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

item、items

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

Frameのサンプル

次の例では、100×100の円を作成し、円の中央にText項目を配置します。この例は、bindプロパティを使用してwidth、height、borderRadiusプロパティの値を定義し、backgroundとbackgroundColorの両方を設定しています。2023.3以降のデバイスでは、backgroundプロパティが使用され、白から灰色のグラデーションの背景が表示されます。それ以前のバージョンのAPLを搭載したデバイスでは、backgroundColorプロパティが使用され、灰色の無地の背景が表示されます。

---

Frameコンポーネントのその他の例については、項目の周囲に境界線を描くを参照してください。

関連トピック

• コンテンツを背景、境界線、ヘッダーと結合する
• 基本コンポーネントのプロパティ

---

---

最終更新日: 2025 年 11 月 11 日