@furo/layout/dist/JSX/FuroResponsiveLayout.d.ts

Layout components for furo

import type { ResponsiveLayoutSize } from "@furo/layout/dist/types/ResponsiveLayoutSize.js";
import * as React from "react";
export interface FuroResponsiveLayout extends React.HTMLAttributes<HTMLElement> {
    "onlayout-changed"?: (d: CustomEvent) => void;
    /**
     * Defines the size for when to switch from six to three and four to two column layout.
     */
    breakpointBig?: number;
    /**
     * Defines the size for when to switch from six to four.
     */
    breakpointSix?: number;
    /**
     * Defines the size for when to switch from three to one or two to one.
     */
    breakpointSmall?: number;
    /**
     * Defines the layout of the component.
     * Supported values are: one, two, three, four and six.
     */
    layout?: ResponsiveLayoutSize;
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /**
             *
             * ### Overview
             *
             * Use the furo-responsive-layout to structure your forms or other content.
             *
             * The heights are given by the highest `cell` in a `row`.
             *
             * > **Deprecation Warning:** The short form attributes (`tripple` instead of `layout-tripple`) will be removed in near future **(end of Q3/24)**
             *
             * It is based on a grid system with the following properties:
             *
             * #### Layout one
             *
             * ```html
             * <furo-responsive-layout layout="one">
             * <div>Item</div>
             * <div>Item</div>
             * <div layout-double>layout-double</div>
             * <div>Item</div>
             * <div>Item</div>
             * </furo-responsive-layout>
             * ```
             * <img src="assets/layout-one.png">
             *
             * #### Layout two
             * If the container size is smaller than `breakpoint-big` the layout will collapse in a layout one.
             *
             * <img src="assets/layout-two.png">
             *
             * #### Layout three
             * If the container size is smaller than `breakpoint-big` the layout will collapse in a layout one.
             *
             * <img src="assets/layout-three.png">
             *
             *
             * #### Layout four
             * If the container size is smaller than `breakpoint-big` the layout will collapse in a layout two.
             * If the container size is smaller than `breakpoint-small` the layout will collapse in a layout one.
             *
             * <img src="assets/layout-four.png">
             *
             *
             * #### Layout six
             * If the container size is smaller than `breakpoint-big` the layout will collapse in a layout three.
             * If the container size is smaller than `breakpoint-small` the layout will collapse in a layout one.
             *
             * <img src="assets/layout-six.png">
             *
             * The ResponsiveLayout component is nestable, this means that you can put 2 six column ResponsiveLayouters in a two column ResponsiveLayout component.
             *
             * ### How to set the sizes
             * Set the following  **attributes**  to set the space your item should take.
             *
             * - **layout-double**   Uses 2 columns.
             *
             * - **layout-tripple**   Uses 3 columns.
             *
             * - **layout-full**  Uses the full width.
             *
             * - **layout-newline**   Starts always on a new line.
             *
             * - **layout-end**   Sticks to the end.
             *
             *
             * > This layouter is a clone of the furo-form-layouter component with a slightly different API.
             *
             * ### ES6 Module Import
             *
             * `import "@furo/layout/dist/furo-responsive-layout.js";`
             */
            "furo-responsive-layout": FuroResponsiveLayout;
        }
    }
}