@vaadin/board
Version:
Web component to create flexible responsive layouts and build nice looking dashboard.
179 lines (178 loc) • 7.18 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "vaadin-board.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/vaadin-board.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "vaadin-board-row.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/vaadin-board-row.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-board-row-mixin.js",
"declarations": [
{
"kind": "mixin",
"description": "",
"name": "BoardRowMixin",
"members": [
{
"kind": "method",
"name": "redraw",
"description": "Redraws the row, if necessary.\n\nIn most cases, a board row will redraw itself if your reconfigure it.\nIf you dynamically change breakpoints\n--vaadin-board-width-small or --vaadin-board-width-medium,\nthen you need to call this method."
}
],
"mixins": [
{
"name": "ResizeMixin",
"package": "@vaadin/component-base/src/resize-mixin.js"
}
],
"parameters": [
{
"name": "superClass"
}
],
"attributes": []
}
],
"exports": [
{
"kind": "js",
"name": "BoardRowMixin",
"declaration": {
"name": "BoardRowMixin",
"module": "src/vaadin-board-row-mixin.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-board-row.js",
"declarations": [
{
"kind": "class",
"description": "`<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows\nto create flexible responsive layouts and build nice looking dashboard.\n\nEach row can contain up to four elements (fewer if colspan is used) and is automatically responsive.\nThe row changes between `large`, `medium` and `small` modes depending on the available width and\nthe set breakpoints.\n\nIn `large` mode, typically all content is shown side-by-side, in `medium` half of the content is\nside by side and in `small` mode, content is laid out vertically.\n\nThe breakpoints can be set using custom CSS properties.\nBy default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px`\n`--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px`",
"name": "BoardRow",
"members": [
{
"kind": "method",
"name": "redraw",
"description": "Redraws the row, if necessary.\n\nIn most cases, a board row will redraw itself if your reconfigure it.\nIf you dynamically change breakpoints\n--vaadin-board-width-small or --vaadin-board-width-medium,\nthen you need to call this method.",
"inheritedFrom": {
"name": "BoardRowMixin",
"module": "src/vaadin-board-row-mixin.js"
}
}
],
"mixins": [
{
"name": "BoardRowMixin",
"module": "src/vaadin-board-row-mixin.js"
},
{
"name": "ElementMixin",
"package": "@vaadin/component-base/src/element-mixin.js"
},
{
"name": "PolylitMixin",
"package": "@vaadin/component-base/src/polylit-mixin.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "vaadin-board-row",
"customElement": true,
"deprecated": "`<vaadin-board-row>` is deprecated and will be removed in Vaadin 26. Consider using `<vaadin-dashboard>` or `<vaadin-dashboard-layout>` as an alternative.",
"attributes": [],
"events": []
}
],
"exports": [
{
"kind": "js",
"name": "BoardRow",
"declaration": {
"name": "BoardRow",
"module": "src/vaadin-board-row.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/vaadin-board.js",
"declarations": [
{
"kind": "class",
"description": "`<vaadin-board>` is a web component to create flexible responsive layouts\nand build nice looking dashboards.\n\nA `<vaadin-board>` is built using `<vaadin-board-row>` elements containing your child elements.\nEach board row consists of four columns, and can contain up to four elements. Using column spans\nyou can tune the layout to your liking.\n\n```html\n<vaadin-board>\n <vaadin-board-row>\n <div>This could be chart 1</div>\n <div>This could be chart 2</div>\n <div>This could be chart 3</div>\n <div>This could be chart 4</div>\n </vaadin-board-row>\n</vaadin-board>\n```",
"name": "Board",
"members": [
{
"kind": "method",
"name": "redraw",
"description": "Redraws the board and all rows inside it, if necessary.\n\nIn most cases, board will redraw itself if your reconfigure it. If you dynamically change\nbreakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,\nthen you need to call this method."
}
],
"mixins": [
{
"name": "ElementMixin",
"package": "@vaadin/component-base/src/element-mixin.js"
},
{
"name": "PolylitMixin",
"package": "@vaadin/component-base/src/polylit-mixin.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "vaadin-board",
"customElement": true,
"deprecated": "`<vaadin-board>` is deprecated and will be removed in Vaadin 26. Consider using `<vaadin-dashboard>` or `<vaadin-dashboard-layout>` as an alternative.",
"attributes": [],
"events": []
}
],
"exports": [
{
"kind": "js",
"name": "Board",
"declaration": {
"name": "Board",
"module": "src/vaadin-board.js"
}
}
]
}
]
}