Fit: clip

A container with a fixed size and the fit clip. The content keeps its size, and the renderer cuts it at the edge.

10 boxes0 edges0 findings

Edit it

# Fit: clip
viewport nested clip 300x140 {
  item-1
  item-2
  item-3
  item-4
  item-5
  item-6
  item-7
  item-8
  item-9
}

10 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": "viewport",
    "mode": "nested",
    "fit": "clip",
    "size": {
      "width": 300,
      "height": 140
    },
    "children": [
      {
        "id": "item-1"
      },
      {
        "id": "item-2"
      },
      {
        "id": "item-3"
      },
      {
        "id": "item-4"
      },
      {
        "id": "item-5"
      },
      {
        "id": "item-6"
      },
      {
        "id": "item-7"
      },
      {
        "id": "item-8"
      },
      {
        "id": "item-9"
      }
    ]
  }
};

const result = layout(input);