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

Layout components for furo

import { LitElement } from "lit";
import { ResponsiveLayoutSize } from "../types/ResponsiveLayoutSize";
/**
 *
 * ### 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";`
 *
 *
 * @cssprop {1rem} [--GridRowGapSize] - width of row gap
 * @cssprop {1rem} [--GridColumnGapSize] - width of column gap
 *
 * @slot {HTMLElement[]} default - slot to add content.
 * @author veith
 * @tagname furo-responsive-layout
 * @public
 */
export declare class FuroResponsiveLayout extends LitElement {
    /**
     * Defines the layout of the component.
     * Supported values are: one, two, three, four and six.
     *
     * @type {ResponsiveLayoutSize}
     * @typeref ResponsiveLayoutSize - "@furo/layout/dist/types/ResponsiveLayoutSize.js"
     * @defaultvalue one
     * @public
     */
    layout: ResponsiveLayoutSize;
    /**
     * Defines the size for when to switch from six to four.
     *
     * @type {number}
     * @defaultvalue 810
     * @public
     */
    breakpointSix: number;
    breakpointSixSmall: number;
    /**
     * Defines the size for when to switch from six to three and four to two column layout.
     *
     * @type {number}
     * @defaultvalue 810
     * @public
     */
    breakpointBig: number;
    /**
     * Defines the size for when to switch from three to one or two to one.
     *
     * @type {number}
     * @defaultvalue 405
     * @public
     */
    breakpointSmall: number;
    /**
     *
     * @private
     */
    _fireResize(): void;
    /**
     *
     * @param width
     * @private
     */
    _checkSize(width: number): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * @private
     */
    _resizeListener: () => void;
    /**
     * Themable Styles
     * @private
     * @return {CSSResult}
     */
    static styles: import("lit").CSSResult;
    /**
     * @private
     * @returns {TemplateResult}
     * @private
     */
    render(): import("lit").TemplateResult<1>;
}