@arco-design/web-vue/es/grid/index.d.ts

Arco Design Vue 2.0: A Vue.js 3 UI Library

import type { App } from 'vue';
import type { ArcoOptions } from '../_utils/types';
import _GridRow from './grid-row';
import _GridCol from './grid-col';
import _Grid from './grid';
import _GridItem from './grid-item';
declare const Grid: {
    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
        cols: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        rowGap: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        colGap: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        collapsed: {
            type: BooleanConstructor;
            default: boolean;
        };
        collapsedRows: {
            type: NumberConstructor;
            default: number;
        };
    }>> & Readonly<{}>, {
        classNames: import("vue").ComputedRef<string[]>;
        style: import("vue").ComputedRef<{
            gap: string;
            'grid-template-columns': string;
        }[]>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
        rowGap: number | import("./interface").ResponsiveValue;
        cols: number | import("./interface").ResponsiveValue;
        colGap: number | import("./interface").ResponsiveValue;
        collapsed: boolean;
        collapsedRows: number;
    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import("vue").ExtractPropTypes<{
        cols: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        rowGap: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        colGap: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        collapsed: {
            type: BooleanConstructor;
            default: boolean;
        };
        collapsedRows: {
            type: NumberConstructor;
            default: number;
        };
    }>> & Readonly<{}>, {
        classNames: import("vue").ComputedRef<string[]>;
        style: import("vue").ComputedRef<{
            gap: string;
            'grid-template-columns': string;
        }[]>;
    }, {}, {}, {}, {
        rowGap: number | import("./interface").ResponsiveValue;
        cols: number | import("./interface").ResponsiveValue;
        colGap: number | import("./interface").ResponsiveValue;
        collapsed: boolean;
        collapsedRows: number;
    }>;
    __isFragment?: undefined;
    __isTeleport?: undefined;
    __isSuspense?: undefined;
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
    cols: {
        type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
        default: number;
    };
    rowGap: {
        type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
        default: number;
    };
    colGap: {
        type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
        default: number;
    };
    collapsed: {
        type: BooleanConstructor;
        default: boolean;
    };
    collapsedRows: {
        type: NumberConstructor;
        default: number;
    };
}>> & Readonly<{}>, {
    classNames: import("vue").ComputedRef<string[]>;
    style: import("vue").ComputedRef<{
        gap: string;
        'grid-template-columns': string;
    }[]>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
    rowGap: number | import("./interface").ResponsiveValue;
    cols: number | import("./interface").ResponsiveValue;
    colGap: number | import("./interface").ResponsiveValue;
    collapsed: boolean;
    collapsedRows: number;
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
    Row: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        gutter: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue | [number | import("./interface").ResponsiveValue, number | import("./interface").ResponsiveValue]>;
            default: number;
        };
        justify: {
            type: import("vue").PropType<"space-around" | "space-between" | "center" | "end" | "start">;
            default: string;
        };
        align: {
            type: import("vue").PropType<"stretch" | "center" | "end" | "start">;
            default: string;
        };
        div: {
            type: BooleanConstructor;
        };
        wrap: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        classNames: import("vue").ComputedRef<{
            [x: string]: boolean | "space-around" | "space-between" | "stretch" | "center" | "end" | "start";
        }>;
        styles: import("vue").ComputedRef<{
            marginTop?: string | undefined;
            marginBottom?: string | undefined;
            marginLeft?: string | undefined;
            marginRight?: string | undefined;
        }>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        gutter: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue | [number | import("./interface").ResponsiveValue, number | import("./interface").ResponsiveValue]>;
            default: number;
        };
        justify: {
            type: import("vue").PropType<"space-around" | "space-between" | "center" | "end" | "start">;
            default: string;
        };
        align: {
            type: import("vue").PropType<"stretch" | "center" | "end" | "start">;
            default: string;
        };
        div: {
            type: BooleanConstructor;
        };
        wrap: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        wrap: boolean;
        justify: "space-around" | "space-between" | "center" | "end" | "start";
        div: boolean;
        align: "stretch" | "center" | "end" | "start";
        gutter: number | import("./interface").ResponsiveValue | [number | import("./interface").ResponsiveValue, number | import("./interface").ResponsiveValue];
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    Col: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        span: {
            type: NumberConstructor;
            default: number;
        };
        offset: {
            type: NumberConstructor;
        };
        order: {
            type: NumberConstructor;
        };
        xs: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        sm: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        md: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        lg: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        xl: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        xxl: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        flex: {
            type: import("vue").PropType<string | number>;
        };
    }>, {
        visible: import("vue").ComputedRef<boolean>;
        classNames: import("vue").ComputedRef<string | {
            [x: string]: number | boolean | undefined;
        }>;
        styles: import("vue").ComputedRef<{
            flex?: import("./interface").FlexType | undefined;
            paddingLeft?: string | undefined;
            paddingRight?: string | undefined;
            paddingTop?: string | undefined;
            paddingBottom?: string | undefined;
        }>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        span: {
            type: NumberConstructor;
            default: number;
        };
        offset: {
            type: NumberConstructor;
        };
        order: {
            type: NumberConstructor;
        };
        xs: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        sm: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        md: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        lg: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        xl: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        xxl: {
            type: import("vue").PropType<number | {
                [key: string]: any;
            }>;
        };
        flex: {
            type: import("vue").PropType<string | number>;
        };
    }>> & Readonly<{}>, {
        span: number;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        span: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        offset: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        suffix: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        classNames: import("vue").ComputedRef<string[]>;
        style: import("vue").ComputedRef<({
            'margin-left': string;
        } | {
            'margin-left'?: undefined;
        } | {
            'grid-column': string;
            display?: undefined;
        } | {
            display: string;
            'grid-column'?: undefined;
        })[]>;
        domRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
        overflow: import("vue").ComputedRef<boolean>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        span: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        offset: {
            type: import("vue").PropType<number | import("./interface").ResponsiveValue>;
            default: number;
        };
        suffix: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        span: number | import("./interface").ResponsiveValue;
        offset: number | import("./interface").ResponsiveValue;
        suffix: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    install: (app: App, options?: ArcoOptions | undefined) => void;
};
export declare type GridRowInstance = InstanceType<typeof _GridRow>;
export declare type GridColInstance = InstanceType<typeof _GridCol>;
export declare type GridInstance = InstanceType<typeof _Grid>;
export declare type GridItemInstance = InstanceType<typeof _GridItem>;
export type { ResponsiveValue, RowProps, ColProps, GridProps, GridItemProps, } from './interface';
export { _GridRow as Row, _GridCol as Col, _GridItem as GridItem };
export default Grid;