@nami-ui/stack/lib/stack.d.ts

A basic layout component.

import { ComponentType, HTMLAttributes } from 'react';
import { Distances } from '@nami-ui/styles';
import './stack.scss';
declare module 'react' {
    interface HTMLAttributes<T> extends StackItemProps {
    }
}
declare type StackComponentProps = {
    className?: string;
};
declare type Padding = Distances | {
    horizontal?: Distances;
    vertical?: Distances;
    top?: Distances;
    right?: Distances;
    bottom?: Distances;
    left?: Distances;
};
declare type Spacing = Distances | {
    horizontal?: Distances;
    vertical?: Distances;
};
export interface StackProps extends HTMLAttributes<HTMLElement> {
    /** 组件根元素 */
    component?: string | ComponentType<StackComponentProps>;
    /** 布局方向 */
    direction?: 'horizontal' | 'vertical';
    /** 主轴对齐方式 */
    justify?: 'start' | 'end' | 'center' | 'between' | 'around';
    /** 副轴对齐方式 */
    align?: 'start' | 'end' | 'center' | 'stretch';
    /** 组件与其子元素之间的间距 */
    padding?: Padding;
    /** 子元素与子元素之间的间距 */
    spacing?: Spacing;
    /** 是否允许换行 */
    wrap?: boolean;
}
export declare function Stack({ component: Component, direction, justify, align, padding, spacing, wrap, className, children, ...otherProps }: StackProps): JSX.Element;
export interface StackItemProps {
    /** 是否为弹性元素，可以定制弹性相关参数，同 CSS 的 `flex` 属性，默认为 `flex: 1 1 auto` */
    $flex?: boolean | string;
    /** 指定该元素所占栅格列数 */
    $col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
    /** 单独为该元素指定副轴对齐方式 */
    $align?: 'start' | 'end' | 'center' | 'stretch';
}
export {};