adwaita-web/dist/components/Box.d.ts

A GTK inspired toolkit designed to build awesome web apps

import React from "react";
import type { ExtendElementProps } from "../utils/extendElementProp";
export declare type BoxProps = ExtendElementProps<"div", React.PropsWithChildren<{
    /** Define how the items inside the Box should be aligned in relation to the Box. */
    align?: true | "center" | "start" | "end";
    /** Define how the items inside the Box should be justified inside the Box. */
    justify?: true | "center" | "start" | "end";
    /** Class names that will be added to the Box's div element. */
    className?: string;
    /** When set to true Box will be displayed as a `inline-flex`. */
    inline?: boolean;
    compact?: boolean;
    /** Makes the Box grow to fill the whole container space, vertically, horizontally, or both. */
    fill?: boolean | "horizontal" | "vertical";
    /** Adds border to the Box. */
    border?: boolean;
    /** Set the layout of the box to be horizontal. (children are placed one next to the other) */
    horizontal?: boolean;
    /** Set the layout of the box to be vertical. (children are placed one below the other) */
    vertical?: boolean;
    space?: "around" | "between";
    /** Adds padding inside the Box. */
    padded?: boolean;
    /** Makes all of the direct children of the box to grow to fill as much space as possible. */
    expandChildren?: boolean;
    /**
     * Makes this component grow to fill the available space, requires the container
     * to be a flexbox to work.
     */
    grow?: boolean | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 999;
}>>;
/** A simple flexbox container. */
export declare function Box({ children, className, inline, compact, fill, border, horizontal, vertical, align, justify, space, padded, expandChildren, grow, ...rest }: BoxProps): JSX.Element;