@furo/layout
Version:
Layout components for furo
1,490 lines • 52.2 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "dist/furo-backdrop.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-backdrop",
"declaration": {
"name": "FuroBackdrop",
"module": "/src/impl/FuroBackdrop"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/furo-horizontal-flex.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-horizontal-flex",
"declaration": {
"name": "FuroHorizontalFlex",
"module": "/src/impl/FuroHorizontalFlex"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/furo-layout-indent.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-layout-indent",
"declaration": {
"name": "FuroLayoutIndent",
"module": "/src/impl/FuroLayoutIndent"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/furo-resizer.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-resizer",
"declaration": {
"name": "FuroResizer",
"module": "/src/impl/FuroResizer"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/furo-responsive-layout.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-responsive-layout",
"declaration": {
"name": "FuroResponsiveLayout",
"module": "/src/impl/FuroResponsiveLayout"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/furo-vertical-flex.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-vertical-flex",
"declaration": {
"name": "FuroVerticalFlex",
"module": "/src/impl/FuroVerticalFlex"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroBackdrop.js",
"declarations": [
{
"kind": "class",
"description": "`furo-backdrop`\n\nDisplays content with a backdrop.\n\nThe element you place in to furo-backdrop will be displayed centered.\n\n\n```html\n<furo-backdrop at-opened=\"--BackdropFocus\" at-closed=\"--backdropClosed\"\n fn-show=\"--expandIconClicked\"\n fn-close=\"--closeRequested, --recordSelected\">\n <any-component at-item-selected=\"--recordSelected\" style=\"width: 90vw; height: 90vh\"></any-component>\n</furo-backdrop>\n\n```\n\nYou can wire and use the elements in furo-backrop as if they were local elements.\n\nDo not forget to add the furo-backdrop-display somewhere in the parent dom.",
"name": "FuroBackdrop",
"members": [
{
"kind": "method",
"name": "_FBPReady",
"privacy": "private"
},
{
"kind": "method",
"name": "close",
"description": "Hides the display.\n\n**Note:** The display will also get closed when the user clicks on the backdrop."
},
{
"kind": "field",
"name": "displayHandle",
"type": {
"text": "HTMLDivElement | undefined"
}
},
{
"kind": "method",
"name": "show",
"description": "Initiates the backdrop and shows the content on top of the backdrop area."
}
],
"events": [
{
"type": {
"text": "FuroBackdrop"
},
"description": "The **closed** event will be fired when the displayed content is invisible and the backdrop is closed. Tipp: Maybe you want to use this event to refocus the initiator. Event.details {FuroBackdrop} is the reference to the emiting DOM node.",
"name": "closed"
},
{
"type": {
"text": "FuroBackdrop"
},
"description": "The **opened** event will be fired when the content is visible on the backdrop. Tipp: you can use this to focus something on the shown content. Event.details {FuroBackdrop} is the reference to the emiting DOM node.",
"name": "opened"
},
{
"type": {
"text": "FuroBackdrop"
},
"description": "Internal event to move the contents to the backdrop-display. Event.details {FuroBackdrop} is the reference to the emiting DOM node.",
"name": "register-backdrop"
}
],
"mixins": [
{
"name": "LitFBP",
"package": "@furo/fbp/dist/LitFBP"
}
],
"tagName": "furo-backdrop",
"customElement": true,
"summary": "show content with backdrop"
}
],
"exports": [
{
"kind": "js",
"name": "FuroBackdrop",
"declaration": {
"name": "FuroBackdrop",
"module": "src/impl/FuroBackdrop.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroBackdropDisplay.js",
"declarations": [
{
"kind": "class",
"description": "`furo-backdrop-display`\n\nThis components receives and displays the backdrop requests from furo-backdrop components.\n\nThe backdrop display can be placed anywhere in the dom. The higher the better.\n\nTipp: place it below or inside the component which applies the style vars. Othewise the displayed components\ndo not know these vars.\n\n```html\n<!-- place the display in your main-stage -->\n<furo-backdrop-display></furo-backdrop-display>\n```",
"name": "FuroBackdropDisplay",
"cssProperties": [
{
"type": {
"text": "0px"
},
"description": "background color of backdrop",
"name": "--furo-backdrop-color",
"default": "#6d6d6d"
}
],
"members": [
{
"kind": "method",
"name": "_FBPReady",
"description": "flow is ready lifecycle method",
"privacy": "private"
},
{
"kind": "method",
"name": "close",
"description": "closes the backdrop.\nYou can close the backdrop on the display element, this is useful when you want to close the backdrops on page\nchanges.\n\nUsually the component which triggers the backdrop or is displayed closes it."
},
{
"kind": "field",
"name": "contentSource",
"type": {
"text": "FuroBackdrop | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "show",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Indicates that the backdrop is shown.",
"privacy": "private",
"attribute": "show",
"reflects": true
},
{
"kind": "field",
"name": "start",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Needed to start the animation.",
"privacy": "private",
"attribute": "start",
"reflects": true
},
{
"kind": "field",
"name": "toDuration",
"type": {
"text": "Number"
},
"default": "100",
"description": "Timeout duration, to wait to notify the changes.\n\nNote: the animations in the css are set with 250ms.\n\nIf you are interested to use at-opened to load some data, set this value lower. This gives you 250 ms extra time to load content, without feeling slow.\n\nIf you are interested to use at-opened to show some ui stuff, set this value higher or equal 250.",
"attribute": "to-duration"
}
],
"attributes": [
{
"name": "show",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Indicates that the backdrop is shown.",
"fieldName": "show"
},
{
"name": "start",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Needed to start the animation.",
"fieldName": "start"
},
{
"name": "to-duration",
"type": {
"text": "Number"
},
"default": "100",
"description": "Timeout duration, to wait to notify the changes.\n\nNote: the animations in the css are set with 250ms.\n\nIf you are interested to use at-opened to load some data, set this value lower. This gives you 250 ms extra time to load content, without feeling slow.\n\nIf you are interested to use at-opened to show some ui stuff, set this value higher or equal 250.",
"fieldName": "toDuration"
}
],
"mixins": [
{
"name": "LitFBP",
"package": "@furo/fbp/dist/LitFBP"
}
],
"tagName": "furo-backdrop-display",
"customElement": true,
"summary": "Display component for furo-backdrop"
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-backdrop-display",
"declaration": {
"name": "FuroBackdropDisplay",
"module": "src/impl/FuroBackdropDisplay.ts"
}
},
{
"kind": "js",
"name": "FuroBackdropDisplay",
"declaration": {
"name": "FuroBackdropDisplay",
"module": "src/impl/FuroBackdropDisplay.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroEmptySpacer.js",
"declarations": [
{
"kind": "class",
"description": "`furo-empty-spacer` Takes the place in furo-horizontal-flex or a furo-vertical-flex.\n\n<furo-demo-snippet source>\n<template>\n <furo-horizontal-flex>\n <div>small</div>\n <!-- A furo-empty-spacer will fill the available space. -->\n <furo-empty-spacer style=\"border: 1px dashed lightgray;\"></furo-empty-spacer>\n <div>small</div>\n </furo-horizontal-flex>\n</template>\n</furo-demo-snippet>",
"name": "FuroEmptySpacer",
"members": [
{
"kind": "field",
"name": "flex",
"type": {
"text": "Boolean"
},
"default": "true",
"description": "Attribute flex for furo-horizontal-flex and furo-vertical-flex",
"attribute": "flex",
"reflects": true
}
],
"attributes": [
{
"name": "flex",
"type": {
"text": "Boolean"
},
"default": "true",
"description": "Attribute flex for furo-horizontal-flex and furo-vertical-flex",
"fieldName": "flex"
}
],
"tagName": "furo-empty-spacer",
"customElement": true,
"summary": "fill the space in a furo-xxxx-flex"
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-empty-spacer",
"declaration": {
"name": "FuroEmptySpacer",
"module": "src/impl/FuroEmptySpacer.ts"
}
},
{
"kind": "js",
"name": "FuroEmptySpacer",
"declaration": {
"name": "FuroEmptySpacer",
"module": "src/impl/FuroEmptySpacer.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroHorizontalFlex.js",
"declarations": [
{
"kind": "class",
"description": "\n### Overview\nWith the HorizontalFlex component, any elements can be aligned horizontally. Similar to css flex.\nThe attribute \"flex\" must be set for growing elements.\nThe component takes up 100% of the space.\n\n\n\n Tags: layout\n\nFor the `furo-horizontal-flex`\n### ES6 Module Import\n\n`import \"@furo/layout/dist/HorizontalFlex.js\";`",
"name": "FuroHorizontalFlex",
"cssProperties": [
{
"type": {
"text": "N/A"
},
"description": "default spacing. If not set --MediaSizeIndentationBottom is used.",
"name": "--furo-horizontal-flex-space",
"default": "0.5rem"
},
{
"type": {
"text": "0.5rem"
},
"description": "Spacing between the elements.",
"name": "--furo-horizontal-flex-space"
}
],
"slots": [
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": "default"
},
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": ""
},
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "navigationItemSelector",
"type": {
"text": "string"
},
"privacy": "public",
"default": "\"*\"",
"description": "A query selector which should match with navigation items.\n\"button, furo-ui5-button, icon\"",
"attribute": "navigation-item-selector"
},
{
"kind": "field",
"name": "space",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Set this to true, to add spacing between the elements. The default value of the spacing is 0.5 rem. Use the `--furo-horizontal-flex-space` css prop to override.",
"attribute": "space"
},
{
"kind": "field",
"name": "vAlignCenter",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Aligns the elements vertically at the position `center`",
"attribute": "v-align-center"
},
{
"kind": "field",
"name": "vAlignEnd",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Aligns the elements vertically at the position `end`",
"attribute": "v-align-end"
},
{
"kind": "field",
"name": "vAlignStart",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Aligns the elements vertically at the position `start`",
"attribute": "v-align-start"
}
],
"attributes": [
{
"name": "navigation-item-selector",
"type": {
"text": "string"
},
"default": "\"*\"",
"description": "A query selector which should match with navigation items.\n\"button, furo-ui5-button, icon\"",
"fieldName": "navigationItemSelector",
"attribute": "navigation-item-selector"
},
{
"type": {
"text": "boolean"
},
"description": "Set this to true, to add spacing between the elements. The default value of the spacing is 0.5 rem. Use the `--furo-horizontal-flex-space` css prop to override.",
"name": "space",
"default": "false",
"fieldName": "space"
},
{
"name": "v-align-center",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Aligns the elements vertically at the position `center`",
"fieldName": "vAlignCenter",
"attribute": "v-align-center"
},
{
"name": "v-align-end",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Aligns the elements vertically at the position `end`",
"fieldName": "vAlignEnd",
"attribute": "v-align-end"
},
{
"name": "v-align-start",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Aligns the elements vertically at the position `start`",
"fieldName": "vAlignStart",
"attribute": "v-align-start"
}
],
"tagName": "furo-horizontal-flex",
"customElement": true,
"summary": "horizontal alignment"
}
],
"exports": [
{
"kind": "js",
"name": "FuroHorizontalFlex",
"declaration": {
"name": "FuroHorizontalFlex",
"module": "src/impl/FuroHorizontalFlex.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroLayoutIndent.js",
"declarations": [
{
"kind": "class",
"description": "### Description\n`furo-layout-indent` is a layout component for adding the responsive spacing.\n\nBy default, the indentation are set for block and inline.\n\n#### ES6 Module Import\n\n`import \"@furo/webcomponents/dist/LayoutIndent.js\";`",
"name": "FuroLayoutIndent",
"slots": [
{
"type": {
"text": "HTMLElement[]"
},
"description": "Place your components here",
"name": "default"
},
{
"type": {
"text": "HTMLElement[]"
},
"description": "Place your components here",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "backgroundDesign",
"type": {
"text": "BackgroundDesign",
"references": [
{
"name": "BackgroundDesign",
"package": "../types",
"module": "BackgroundDesign"
}
]
},
"description": "Chose a background design.",
"privacy": "public",
"attribute": "background-design",
"reflects": true
},
{
"kind": "field",
"name": "block",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on block (top/bottom) only.",
"attribute": "block",
"reflects": true
},
{
"kind": "field",
"name": "blockEnd",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on block-end only.",
"attribute": "block-end",
"reflects": true
},
{
"kind": "field",
"name": "blockStart",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on block-start only.",
"attribute": "block-start",
"reflects": true
},
{
"kind": "field",
"name": "flex",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Set flex behaviour if used inside a `furo-vertical-flex` / `furo-horizontal-flex`",
"attribute": "flex",
"reflects": true
},
{
"kind": "field",
"name": "inline",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on inline (left/right) only.",
"attribute": "inline",
"reflects": true
},
{
"kind": "field",
"name": "inlineEnd",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on inline-start only.",
"attribute": "inline-end",
"reflects": true
},
{
"kind": "field",
"name": "inlineStart",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds indentation on inline-start only.",
"attribute": "inline-start",
"reflects": true
},
{
"kind": "field",
"name": "scrolls",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"description": "Adds scrolling behaviour if used inside a `furo-vertical-flex`",
"attribute": "scroll",
"reflects": true
}
],
"attributes": [
{
"name": "background-design",
"type": {
"text": "BackgroundDesign",
"references": [
{
"name": "BackgroundDesign",
"package": "../types",
"module": "BackgroundDesign"
}
]
},
"description": "Chose a background design.",
"fieldName": "backgroundDesign"
},
{
"name": "block",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on block (top/bottom) only.",
"fieldName": "block"
},
{
"name": "block-end",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on block-end only.",
"fieldName": "blockEnd"
},
{
"name": "block-start",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on block-start only.",
"fieldName": "blockStart"
},
{
"name": "flex",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Set flex behaviour if used inside a `furo-vertical-flex` / `furo-horizontal-flex`",
"fieldName": "flex"
},
{
"name": "inline",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on inline (left/right) only.",
"fieldName": "inline"
},
{
"name": "inline-end",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on inline-start only.",
"fieldName": "inlineEnd"
},
{
"name": "inline-start",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds indentation on inline-start only.",
"fieldName": "inlineStart"
},
{
"name": "scroll",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Adds scrolling behaviour if used inside a `furo-vertical-flex`",
"fieldName": "scrolls"
}
],
"tagName": "furo-layout-indent",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "FuroLayoutIndent",
"declaration": {
"name": "FuroLayoutIndent",
"module": "src/impl/FuroLayoutIndent.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroResizer.js",
"declarations": [
{
"kind": "class",
"description": "`furo-resizer`\n container which let you resize its width.\n\n Double-click on the handler to reset the width.\n You need a counter part which flexes.\n\n\n```html\n <furo-horizontal-flex>\n <div flex> the flexible part </div>\n <!-- you have to set at leas one handle to resize the content -->\n <furo-resizer righthandle remember=\"logv\" minwidth=\"280\" maxwidth=\"780\">\n <some-content></some-content>\n </furo-resizer>\n </furo-horizontal-flex>\n```",
"name": "FuroResizer",
"slots": [
{
"type": {
"text": "HTMLElement [0..n]"
},
"description": "default slot to add content.",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "_FBPReady",
"description": "flow is ready lifecycle method",
"privacy": "private"
},
{
"kind": "field",
"name": "_handleLRM",
"type": {
"text": "number"
},
"privacy": "private",
"default": "1"
},
{
"kind": "field",
"name": "_movementHandler",
"privacy": "private",
"description": "capture the mouse movement and resize the width",
"parameters": [
{
"description": "MouseEvent",
"name": "e"
}
]
},
{
"kind": "field",
"name": "_positions",
"type": {
"text": "{x: number }"
},
"privacy": "private",
"default": "{x:0}"
},
{
"kind": "field",
"name": "_startTracking",
"privacy": "private",
"description": "Start mouse move tracking",
"parameters": [
{
"name": "e"
}
]
},
{
"kind": "method",
"name": "_startTrackingLeft",
"privacy": "private",
"parameters": [
{
"name": "e",
"type": {
"text": "MouseEvent"
}
}
],
"description": "register the left handler"
},
{
"kind": "method",
"name": "_startTrackingRight",
"privacy": "private",
"parameters": [
{
"name": "e",
"type": {
"text": "MouseEvent"
}
}
],
"description": "register the right handler"
},
{
"kind": "field",
"name": "_startwidth",
"type": {
"text": "number"
},
"privacy": "private",
"default": "0"
},
{
"kind": "field",
"name": "_unregister",
"privacy": "private",
"description": "remove the listeners"
},
{
"kind": "field",
"name": "initialWidthSetByStyle",
"type": {
"text": "string |undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "leftHandle",
"type": {
"text": "HTMLDivElement | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "maxwidth",
"type": {
"text": "number| undefined"
},
"privacy": "public",
"description": "Set the maximal width of the resizer",
"attribute": "maxwidth"
},
{
"kind": "field",
"name": "minwidth",
"type": {
"text": "number| undefined"
},
"description": "Set the minimal width of the resizer",
"attribute": "minwidth"
},
{
"kind": "field",
"name": "remember",
"type": {
"text": "string | undefined"
},
"privacy": "public",
"description": "remember the size after resizing.\nGive the id for the rememberer, you can use the id on different views",
"attribute": "remember"
},
{
"kind": "method",
"name": "resetSize",
"description": "removes remember and set to the initial size"
},
{
"kind": "field",
"name": "rightHandle",
"type": {
"text": "HTMLDivElement | undefined"
},
"privacy": "private"
}
],
"attributes": [
{
"type": {
"text": "void"
},
"description": "add a handle to the left side.",
"name": "lefthandle"
},
{
"name": "maxwidth",
"type": {
"text": "number| undefined"
},
"description": "Set the maximal width of the resizer",
"fieldName": "maxwidth"
},
{
"name": "minwidth",
"type": {
"text": "number| undefined"
},
"description": "Set the minimal width of the resizer",
"fieldName": "minwidth"
},
{
"name": "remember",
"type": {
"text": "string | undefined"
},
"description": "remember the size after resizing.\nGive the id for the rememberer, you can use the id on different views",
"fieldName": "remember"
},
{
"type": {
"text": "void"
},
"description": "add a handle to the right side.",
"name": "righthandle"
}
],
"mixins": [
{
"name": "LitFBP",
"package": "@furo/fbp/dist/LitFBP"
}
],
"tagName": "furo-resizer",
"customElement": true,
"summary": "resizable box"
}
],
"exports": [
{
"kind": "js",
"name": "FuroResizer",
"declaration": {
"name": "FuroResizer",
"module": "src/impl/FuroResizer.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroResponsiveLayout.js",
"declarations": [
{
"kind": "class",
"description": "\n### Overview\n\nUse the furo-responsive-layout to structure your forms or other content.\n\nThe heights are given by the highest `cell` in a `row`.\n\n> **Deprecation Warning:** The short form attributes (`tripple` instead of `layout-tripple`) will be removed in near future **(end of Q3/24)**\n\nIt is based on a grid system with the following properties:\n\n#### Layout one\n\n```html\n<furo-responsive-layout layout=\"one\">\n <div>Item</div>\n <div>Item</div>\n <div layout-double>layout-double</div>\n <div>Item</div>\n <div>Item</div>\n</furo-responsive-layout>\n```\n<img src=\"assets/layout-one.png\">\n\n#### Layout two\nIf the container size is smaller than `breakpoint-big` the layout will collapse in a layout one.\n\n<img src=\"assets/layout-two.png\">\n\n#### Layout three\nIf the container size is smaller than `breakpoint-big` the layout will collapse in a layout one.\n\n<img src=\"assets/layout-three.png\">\n\n\n#### Layout four\nIf the container size is smaller than `breakpoint-big` the layout will collapse in a layout two.\nIf the container size is smaller than `breakpoint-small` the layout will collapse in a layout one.\n\n<img src=\"assets/layout-four.png\">\n\n\n#### Layout six\nIf the container size is smaller than `breakpoint-big` the layout will collapse in a layout three.\nIf the container size is smaller than `breakpoint-small` the layout will collapse in a layout one.\n\n<img src=\"assets/layout-six.png\">\n\nThe ResponsiveLayout component is nestable, this means that you can put 2 six column ResponsiveLayouters in a two column ResponsiveLayout component.\n\n### How to set the sizes\nSet the following **attributes** to set the space your item should take.\n\n- **layout-double** Uses 2 columns.\n\n- **layout-tripple** Uses 3 columns.\n\n- **layout-full** Uses the full width.\n\n- **layout-newline** Starts always on a new line.\n\n- **layout-end** Sticks to the end.\n\n\n> This layouter is a clone of the furo-form-layouter component with a slightly different API.\n\n### ES6 Module Import\n\n`import \"@furo/layout/dist/furo-responsive-layout.js\";`",
"name": "FuroResponsiveLayout",
"cssProperties": [
{
"type": {
"text": "1rem"
},
"description": "width of row gap",
"name": "--GridRowGapSize"
},
{
"type": {
"text": "1rem"
},
"description": "width of column gap",
"name": "--GridColumnGapSize"
}
],
"slots": [
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": "default"
}
],
"members": [
{
"kind": "method",
"name": "_checkSize",
"parameters": [
{
"name": "width",
"type": {
"text": "number"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "_fireResize",
"privacy": "private"
},
{
"kind": "field",
"name": "_resizeListener",
"privacy": "private"
},
{
"kind": "field",
"name": "breakpointBig",
"type": {
"text": "number"
},
"default": "810",
"description": "Defines the size for when to switch from six to three and four to two column layout.",
"privacy": "public",
"attribute": "breakpoint-big",
"reflects": true
},
{
"kind": "field",
"name": "breakpointSix",
"type": {
"text": "number"
},
"default": "1250",
"description": "Defines the size for when to switch from six to four.",
"privacy": "public",
"attribute": "breakpoint-six",
"reflects": true
},
{
"kind": "field",
"name": "breakpointSixSmall",
"type": {
"text": "number"
},
"default": "650"
},
{
"kind": "field",
"name": "breakpointSmall",
"type": {
"text": "number"
},
"default": "405",
"description": "Defines the size for when to switch from three to one or two to one.",
"privacy": "public",
"attribute": "breakpoint-small",
"reflects": true
},
{
"kind": "field",
"name": "layout",
"type": {
"text": "ResponsiveLayoutSize",
"references": [
{
"name": "ResponsiveLayoutSize",
"package": "@furo/layout",
"module": "dist/types/ResponsiveLayoutSize.js"
}
]
},
"description": "Defines the layout of the component.\nSupported values are: one, two, three, four and six.",
"privacy": "public",
"attribute": "layout",
"reflects": true
}
],
"events": [
{
"name": "layout-changed",
"type": {
"text": "CustomEvent"
}
}
],
"attributes": [
{
"name": "breakpoint-big",
"type": {
"text": "number"
},
"default": "810",
"description": "Defines the size for when to switch from six to three and four to two column layout.",
"fieldName": "breakpointBig"
},
{
"name": "breakpoint-six",
"type": {
"text": "number"
},
"default": "1250",
"description": "Defines the size for when to switch from six to four.",
"fieldName": "breakpointSix"
},
{
"name": "breakpoint-small",
"type": {
"text": "number"
},
"default": "405",
"description": "Defines the size for when to switch from three to one or two to one.",
"fieldName": "breakpointSmall"
},
{
"name": "layout",
"type": {
"text": "ResponsiveLayoutSize",
"references": [
{
"name": "ResponsiveLayoutSize",
"package": "@furo/layout",
"module": "dist/types/ResponsiveLayoutSize.js"
}
]
},
"description": "Defines the layout of the component.\nSupported values are: one, two, three, four and six.",
"fieldName": "layout"
}
],
"tagName": "furo-responsive-layout",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "FuroResponsiveLayout",
"declaration": {
"name": "FuroResponsiveLayout",
"module": "src/impl/FuroResponsiveLayout.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroSplitView.js",
"declarations": [
{
"kind": "class",
"description": "`furo-split-view`\nis a layout component to visualise main / detail views (left right layout for master detail views).\nYou can add the attribute scroll on the detail view to make the content scrollable.\n\n```html\n<furo-split-view>\n <div slot=\"master\">Master</div>\n <big-component scroll> </big-component>\n</furo-split-view>\n```",
"name": "FuroSplitView",
"cssProperties": [
{
"type": {
"text": "N/A"
},
"description": "width of the master slot",
"name": "--split-master-width",
"default": "270px"
}
],
"slots": [
{
"type": {
"text": "HTMLElement [0..n]"
},
"description": "default slot to add content to the main section.",
"name": "master"
},
{
"type": {
"text": "HTMLElement [0..n]"
},
"description": "default slot to add content to the detail section.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "reverse",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "reverse"
}
],
"attributes": [
{
"name": "reverse",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "reverse"
}
],
"mixins": [
{
"name": "LitFBP",
"package": "@furo/fbp/dist/LitFBP"
}
],
"tagName": "furo-split-view",
"customElement": true,
"summary": "splitted layout"
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-split-view",
"declaration": {
"name": "FuroSplitView",
"module": "src/impl/FuroSplitView.ts"
}
},
{
"kind": "js",
"name": "FuroSplitView",
"declaration": {
"name": "FuroSplitView",
"module": "src/impl/FuroSplitView.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroVerticalFlex.js",
"declarations": [
{
"kind": "class",
"description": "\n### Overview\n\nUse this to arrange your content vertically.\n\n### Usage\n\nThe Elements you place inside the default slot can have the following attributes:\n\n - <b>flex</b>: Makes the element use the \"rest\" of the space (flex: 1).\n - <b>scroll</b>: Makes the element scrollable.\n - <b>padding-inline</b>: Applies inline padding.\n\n\n### Component Import\n`import \"@furo/layout/dist/VerticalFlex.js\";`",
"name": "FuroVerticalFlex",
"slots": [
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": "default"
},
{
"type": {
"text": "HTMLElement[]"
},
"description": "slot to add content.",
"name": ""
}
],
"members": [],
"events": [
{
"type": {
"text": "CustomEvent"
},
"description": "Fired when the scroll area scrolls down",
"name": "scroll-down"
},
{
"type": {
"text": "CustomEvent"
},
"description": "Fired when the scroll area scrolls up",
"name": "scroll-up"
}
],
"tagName": "furo-vertical-flex",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "FuroVerticalFlex",
"declaration": {
"name": "FuroVerticalFlex",
"module": "src/impl/FuroVerticalFlex.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/impl/FuroVerticalScroller.js",
"declarations": [
{
"kind": "class",
"description": "`furo-vertical-scroller`\n\n```html\n<furo-vertical-scroller>\n <your-content></your-content>\n</furo-vertical-scroller>\n```",
"name": "FuroVerticalScroller",
"cssProperties": [
{
"type": {
"text": "N/A"
},
"description": "Background color scrollbar",
"name": "--surface",
"default": "white"
},
{
"type": {
"text": "N/A"
},
"description": "Background color of the draggable scrolling element",
"name": "--on-surface",
"default": "black"
}
],
"slots": [
{
"type": {
"text": "HTMLElement [0..n]"
},
"description": "default slot to add content.",
"name": ""
}
],
"members": [],
"mixins": [
{
"name": "LitFBP",
"package": "@furo/fbp/dist/LitFBP"
}
],
"tagName": "furo-vertical-scroller",
"customElement": true,
"summary": "vertical scroll"
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "furo-vertical-scroller",
"declaration": {
"name": "FuroVerticalScroller",
"module": "src/impl/FuroVerticalScroller.ts"
}
},
{
"kind": "js",
"name": "FuroVerticalScroller",
"declaration": {
"name": "FuroVerticalScroller",
"module": "src/impl/FuroVerticalScroller.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/index.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroBackdrop"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroBackdropDisplay"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroEmptySpacer"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroHorizontalFlex"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroLayoutIndent"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroResizer"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroResponsiveLayout"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroSplitView"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroVerticalFlex"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"module": "src/impl/FuroVerticalScroller"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/JSX/FuroBackdrop.js",
"declarations": [],
"