Col Layout Rules

TIP

All components support layout configuration. See

naive-ui Grid Layout Col props

Custom Form Layout

Configuration Method

Configure component layout using rule.col. Naive UI uses a 24-column grid system with default span: 24 (full row).

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    col: {
        span: 12,  // 12 columns (half width)
    }
}

Configuration Parameters

Name	Type	Default Value	Description
span	number	24	Number of grid columns occupied
offset	number	0	Number of spacing columns on the left
push	number	0	Number of columns to move right
pull	number	0	Number of columns to move left

Layout Examples

Basic Layout

Single Column Layout (Default)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // Default: span: 24 (full row)
}

Two Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 12,  // 12 columns (half width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 12,  // 12 columns (half width)
        }
    }
]

Three Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Stock',
        field: 'stock',
        col: {
            span: 8,  // 8 columns (1/3 width)
        }
    }
]

Offset Layout

Using offset to Set Left Offset

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        span: 12,
        offset: 6,  // Offset 6 columns left
    }
}

Using push to Move Right

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        span: 8,
        push: 8,  // Push 8 columns right
    }
}

Using pull to Move Left

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        span: 8,
        pull: 4,  // Pull 4 columns left
    }
}

Using Row and Col Components for Layout

Use row and col components to manually control layout instead of rule.col.

Basic Usage

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            }
        ]
    }
]

Multi-Row Layout

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'select',
                        title: 'Product Category',
                        field: 'category',
                    }
                ]
            }
        ]
    },
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Stock',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: 'On Sale',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

Tips

• When using row and col components, set native: true to generate components as-is
• Naive UI uses a 24-grid system
• You can set related properties through row's props