APL Frame
Frameは1つの子を保持し、境界線と背景の色を持ちます。
プロパティ
Frameコンポーネントには基本コンポーネントプロパティのほかに次のプロパティがあります。列の意味を参照してください。
Frameの定義にはheight
とwidth
を必ず含めるようにします。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
|
none |
◯ |
◯ |
背景の色です。 | |
|
負でない絶対ディメンション |
none |
◯ |
◯ |
左下の角丸の半径を指定します。 |
|
負でない絶対ディメンション |
none |
◯ |
◯ |
右下の角丸の半径を指定します。 |
|
none |
◯ |
◯ |
境界線の色です。 | |
|
負でない絶対ディメンション |
0 |
◯ |
◯ |
角の丸い長方形の角の半径を指定します。 |
|
負でない絶対ディメンション |
|
◯ |
◯ |
境界線の幅です。 |
|
負でない絶対ディメンション |
none |
◯ |
◯ |
左上の角丸の半径を指定します。指定した場合、 |
|
負でない絶対ディメンション |
none |
◯ |
◯ |
右上の角丸の半径を指定します。指定した場合、 |
|
負でない絶対ディメンション |
0 |
◯ |
◯ |
境界線の幅です。 |
|
|
[] |
✕ |
✕ |
子コンポーネントです。 |
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 日