@furo/layout/dist/vscode.html-custom-data.json

Layout components for furo

{
  "version": 1.1,
  "tags": [
    {
      "name": "furo-backdrop",
      "description": "show content with backdrop\n\n\n---\n\n\n\n\n### **Events:**\n - **closed** - 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.\n- **opened** - 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.\n- **register-backdrop** - Internal event to move the contents to the backdrop-display. Event.details {FuroBackdrop} is the reference to the emiting DOM node.\n\n### **Methods:**\n - **close()** - Hides the display.\n\n**Note:** The display will also get closed when the user clicks on the backdrop.\n- **show()** - Initiates the backdrop and shows the content on top of the backdrop area.",
      "attributes": [],
      "references": []
    },
    {
      "name": "furo-backdrop-display",
      "description": "Display component for furo-backdrop\n\n\n---\n\n\n\n\n### **Methods:**\n - **close()** - 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.\n\n### **CSS Properties:**\n - **--furo-backdrop-color** - background color of backdrop _(default: #6d6d6d)_",
      "attributes": [
        {
          "name": "show",
          "description": "Indicates that the backdrop is shown.",
          "values": []
        },
        {
          "name": "start",
          "description": "Needed to start the animation.",
          "values": []
        },
        {
          "name": "to-duration",
          "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.",
          "values": [{ "name": "Number" }]
        }
      ],
      "references": []
    },
    {
      "name": "furo-empty-spacer",
      "description": "fill the space in a furo-xxxx-flex\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "flex",
          "description": "Attribute flex for furo-horizontal-flex and furo-vertical-flex",
          "values": [{ "name": "Boolean" }]
        }
      ],
      "references": []
    },
    {
      "name": "furo-horizontal-flex",
      "description": "horizontal alignment\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - slot to add content.\n- _default_ - slot to add content.\n- _default_ - slot to add content.\n\n### **CSS Properties:**\n - **--furo-horizontal-flex-space** - default spacing. If not set --MediaSizeIndentationBottom is used. _(default: 0.5rem)_\n- **--furo-horizontal-flex-space** - Spacing between the elements. _(default: undefined)_",
      "attributes": [
        {
          "name": "navigation-item-selector",
          "description": "A query selector which should match with navigation items.\n\"button, furo-ui5-button, icon\"",
          "values": []
        },
        {
          "name": "space",
          "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.",
          "values": []
        },
        {
          "name": "v-align-center",
          "description": "Aligns the elements vertically at the position `center`",
          "values": []
        },
        {
          "name": "v-align-end",
          "description": "Aligns the elements vertically at the position `end`",
          "values": []
        },
        {
          "name": "v-align-start",
          "description": "Aligns the elements vertically at the position `start`",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "furo-layout-indent",
      "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\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Place your components here\n- _default_ - Place your components here",
      "attributes": [
        {
          "name": "background-design",
          "description": "Chose a background design.",
          "values": [{ "name": "BackgroundDesign" }]
        },
        {
          "name": "block",
          "description": "Adds indentation on block (top/bottom) only.",
          "values": []
        },
        {
          "name": "block-end",
          "description": "Adds indentation on block-end  only.",
          "values": []
        },
        {
          "name": "block-start",
          "description": "Adds indentation on block-start  only.",
          "values": []
        },
        {
          "name": "flex",
          "description": "Set flex behaviour if used inside a `furo-vertical-flex` / `furo-horizontal-flex`",
          "values": []
        },
        {
          "name": "inline",
          "description": "Adds indentation on inline (left/right) only.",
          "values": []
        },
        {
          "name": "inline-end",
          "description": "Adds indentation on inline-start only.",
          "values": []
        },
        {
          "name": "inline-start",
          "description": "Adds indentation on inline-start only.",
          "values": []
        },
        {
          "name": "scroll",
          "description": "Adds scrolling behaviour if used inside a `furo-vertical-flex`",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "furo-resizer",
      "description": "resizable box\n\n\n---\n\n\n\n\n### **Methods:**\n - **resetSize()** - removes remember and set to the initial size\n\n### **Slots:**\n - _default_ - default slot to add content.",
      "attributes": [
        {
          "name": "lefthandle",
          "description": "add a handle to the left side.",
          "values": [{ "name": "void" }]
        },
        {
          "name": "maxwidth",
          "description": "Set the maximal width of the resizer",
          "values": []
        },
        {
          "name": "minwidth",
          "description": "Set the minimal width of the resizer",
          "values": []
        },
        {
          "name": "remember",
          "description": "remember the size after resizing.\nGive the id for the rememberer, you can use the id on different views",
          "values": []
        },
        {
          "name": "righthandle",
          "description": "add a handle to the right side.",
          "values": [{ "name": "void" }]
        }
      ],
      "references": []
    },
    {
      "name": "furo-responsive-layout",
      "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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **layout-changed** - undefined\n\n### **Slots:**\n - **default** - slot to add content.\n\n### **CSS Properties:**\n - **--GridRowGapSize** - width of row gap _(default: undefined)_\n- **--GridColumnGapSize** - width of column gap _(default: undefined)_",
      "attributes": [
        {
          "name": "breakpoint-big",
          "description": "Defines the size for when to switch from six to three and four to two column layout.",
          "values": []
        },
        {
          "name": "breakpoint-six",
          "description": "Defines the size for when to switch from six to four.",
          "values": []
        },
        {
          "name": "breakpoint-small",
          "description": "Defines the size for when to switch from three to one or two to one.",
          "values": []
        },
        {
          "name": "layout",
          "description": "Defines the layout of the component.\nSupported values are: one, two, three, four and six.",
          "values": [{ "name": "ResponsiveLayoutSize" }]
        }
      ],
      "references": []
    },
    {
      "name": "furo-split-view",
      "description": "splitted layout\n\n\n---\n\n\n\n\n### **Slots:**\n - **master** - default slot to add content to the main section.\n- _default_ - default slot to add content to the detail section.\n\n### **CSS Properties:**\n - **--split-master-width** - width of the master slot _(default: 270px)_",
      "attributes": [{ "name": "reverse", "values": [] }],
      "references": []
    },
    {
      "name": "furo-vertical-flex",
      "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\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **scroll-down** - Fired when the scroll area scrolls down\n- **scroll-up** - Fired when the scroll area scrolls up\n\n### **Slots:**\n - **default** - slot to add content.\n- _default_ - slot to add content.",
      "attributes": [],
      "references": []
    },
    {
      "name": "furo-vertical-scroller",
      "description": "vertical scroll\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - default slot to add content.\n\n### **CSS Properties:**\n - **--surface** - Background color scrollbar _(default: white)_\n- **--on-surface** - Background color of the draggable scrolling element _(default: black)_",
      "attributes": [],
      "references": []
    }
  ]
}