react-antd-admin-panel/dist/section/Section.d.ts

Modern TypeScript-first React admin panel builder with Ant Design 6

import React from 'react';
import type { CardProps, ModalProps, DrawerProps } from 'antd';
import { BaseBuilder } from '../base/BaseBuilder';
import type { ComponentConfig } from '../types';
export interface ResponsiveBreakpoint {
    xs?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
    xxl?: number;
}
export interface SectionConfig extends ComponentConfig {
    col?: number;
    responsive?: ResponsiveBreakpoint;
    row?: boolean;
    card?: boolean;
    cardProps?: CardProps;
    modal?: boolean;
    modalProps?: ModalProps;
    drawer?: boolean;
    drawerProps?: DrawerProps;
    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
    align?: 'top' | 'middle' | 'bottom';
    gutter?: number | [number, number];
    style?: React.CSSProperties;
}
/**
 * Section - Layout and composition component
 * Manages grid layout, child components, and form integration
 *
 * @example
 * const section = new Section()
 *   .card(true)
 *   .col(12)
 *   .add(new Input().key('name').label('Name'))
 *   .add(new Input().key('email').label('Email'));
 */
export declare class Section extends BaseBuilder<SectionConfig> {
    _children: Array<{
        render(): React.ReactNode;
    } | React.ReactNode>;
    _rowChildren: Array<{
        render(): React.ReactNode;
    } | React.ReactNode>;
    /**
     * Set column span (24-grid system)
     */
    col(span: number): this;
    /**
     * Set responsive breakpoints for column span
     */
    responsive(breakpoints: ResponsiveBreakpoint): this;
    /**
     * Enable row layout (horizontal)
     */
    row(value?: boolean): this;
    /**
     * Wrap in Card component
     */
    card(value?: boolean | CardProps): this;
    /**
     * Render in Modal
     */
    modal(value?: boolean | ModalProps): this;
    /**
     * Render in Drawer
     */
    drawer(value?: boolean | DrawerProps): this;
    /**
     * Set row justify alignment
     */
    justify(value: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'): this;
    /**
     * Set row align
     */
    align(value: 'top' | 'middle' | 'bottom'): this;
    /**
     * Set gutter (spacing between columns)
     */
    gutter(value: number | [number, number]): this;
    /**
     * Set custom styles
     */
    style(value: React.CSSProperties): this;
    /**
     * Add a child component
     */
    add(child: {
        render(): React.ReactNode;
    } | React.ReactNode): this;
    /**
     * Add multiple children
     */
    addMore(children: Array<{
        render(): React.ReactNode;
    } | React.ReactNode>): this;
    /**
     * Add child to row-end position
     */
    addRowEnd(child: {
        render(): React.ReactNode;
    } | React.ReactNode): this;
    /**
     * Clear all children
     */
    clear(): this;
    /**
     * Get all children
     */
    getChildren(): Array<{
        render(): React.ReactNode;
    } | React.ReactNode>;
    /**
     * Render method for compatibility - returns a SectionComponent
     */
    render(): React.ReactNode;
}
//# sourceMappingURL=Section.d.ts.map