@withjoy/joykit/lib/packages/core/components/Columns/index.d.ts

UI Component Library for Joy web

import React from 'react';
import { Column } from './components/Column';
import { ColumnGap } from './types';
import { AbstractPureComponent } from '../../../core/common';
import { BaseComponentProps } from '../../common/props';
interface ColumnsProps extends BaseComponentProps {
    fluid?: boolean;
    /**
     * Horizontally center the children.
     * @default false
     */
    centered: boolean;
    children: React.ReactNode;
    className?: string;
    /**
     * Each column has a **gap** equal to a value defined in the **spatial system**, which has a default value of `1rem`.
     * Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of `spatialValuesInRem[columnGap]`,
     * or `spatialValuesInRem[SpatialOptions.default]` by default (2rem).
     *
     * Note: This value will override every directly nested `<Column />` component of their `columnGap` prop.
     * @default SpatialOption.default
     */
    columnGap: ColumnGap;
    /**
     * While <Columns /> can have as many nested <Column /> components and the width per Column is
     * distributed evenly, you can set this to `true` to allow this component to handle more children
     * than would fit in a single row as an alternative to creating another `<Columns />` Grouping.
     *
     * Note: When set to `false`, each column will have an **equal width**, no matter the number of columns.
     * @default false
     */
    multiline: boolean;
    /**
     * By default (and as a driving function towards mobile-first development), columns are activated from `tablet` onwards.
     * To have columns work on mobile, pass `false`.
     * @default true
     */
    stackOnMobile: boolean;
}
declare class Columns extends AbstractPureComponent<ColumnsProps> {
    static displayName: string;
    static defaultProps: {
        columnGap: string;
        multiline: boolean;
        centered: boolean;
        stackOnMobile: boolean;
    };
    static Column: typeof Column;
    constructor(props: ColumnsProps);
    renderChildren: () => ({} | null | undefined)[];
    render(): JSX.Element;
    protected validateProps(props: ColumnsProps): void;
    /**
     * All direct children to a <Columns /> component must be a <Column />
     *
     * @param props.chilren
     * @returns whether or not this Component is well formed.
     */
    private hasValidChildren;
}
export { Columns, ColumnsProps };