@appnest/masonry-layout/custom-elements.json

An efficient and fast web component that gives you a beautiful masonry layout

{
  "version": "experimental",
  "tags": [
    {
      "name": "masonry-layout",
      "path": "./../src/lib/masonry-layout.ts",
      "description": "Masonry layout web component. It places the slotted elements in the optimal position based\non the available vertical space, just like mason fitting stones in a wall.",
      "attributes": [
        {
          "name": "debounce",
          "description": "The ms of debounce when the element resizes.",
          "type": "number"
        },
        {
          "name": "maxcolwidth",
          "description": "The maximum width of each column if cols are set to auto.",
          "type": "number"
        },
        {
          "name": "gap",
          "description": "The gap in pixels between the columns.",
          "type": "number"
        },
        {
          "name": "cols",
          "description": "The amount of columns.",
          "type": "number | \"auto\""
        }
      ],
      "properties": [
        {
          "name": "debounce",
          "attribute": "debounce",
          "description": "The ms of debounce when the element resizes.",
          "type": "number"
        },
        {
          "name": "maxColWidth",
          "attribute": "maxcolwidth",
          "description": "The maximum width of each column if cols are set to auto.",
          "type": "number"
        },
        {
          "name": "gap",
          "attribute": "gap",
          "description": "The gap in pixels between the columns.",
          "type": "number"
        },
        {
          "name": "cols",
          "attribute": "cols",
          "description": "The amount of columns.",
          "type": "number | \"auto\""
        },
        {
          "name": "onSlotChange"
        },
        {
          "name": "onResize"
        },
        {
          "name": "layout"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Items that should be distributed in the layout."
        }
      ],
      "cssParts": [
        {
          "name": "column",
          "description": "Each column of the masonry layout."
        },
        {
          "name": "column-index",
          "description": "The specific column at the given index (eg. column-0 would target the first column and so on)"
        }
      ]
    }
  ]
}