Fit: scale

A container with a fixed size. Its content becomes smaller to fit, and the labels become smaller too.

19 boxes0 edges0 findings

Edit it

# Fit: scale
frame grid(columns: 2) nested {
  small-window nested scale 240x160 { w1 w2 w3 w4 w5 w6 w7 w8 w9 w10 w11 w12 }
  big-window nested { g1 g2 g3 g4 }
}

19 boxes, 0 edges. The audit finds no defect.

The input

The same layout in TypeScript. The input is plain data, so it can come from JSON.

import { layout } from "ireko";

const input = {
  "root": {
    "id": "frame",
    "mode": "nested",
    "layout": {
      "type": "grid",
      "columns": 2
    },
    "children": [
      {
        "id": "small-window",
        "mode": "nested",
        "fit": "scale",
        "size": {
          "width": 240,
          "height": 160
        },
        "children": [
          {
            "id": "w1"
          },
          {
            "id": "w2"
          },
          {
            "id": "w3"
          },
          {
            "id": "w4"
          },
          {
            "id": "w5"
          },
          {
            "id": "w6"
          },
          {
            "id": "w7"
          },
          {
            "id": "w8"
          },
          {
            "id": "w9"
          },
          {
            "id": "w10"
          },
          {
            "id": "w11"
          },
          {
            "id": "w12"
          }
        ]
      },
      {
        "id": "big-window",
        "mode": "nested",
        "fit": "grow",
        "children": [
          {
            "id": "g1"
          },
          {
            "id": "g2"
          },
          {
            "id": "g3"
          },
          {
            "id": "g4"
          }
        ]
      }
    ]
  }
};

const result = layout(input);