PHP code example of zen0x7 / gridder

1. Go to this page and download the library: Download zen0x7/gridder library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

zen0x7 / gridder example snippets


public static function fields()
{
    return [
        Panel::make(__('Details'), [
            Text::make(__('Name'), 'name')
                ->withMeta([
                    "gridder" => [
                        "cols" => Gridder::$FIELD_ONE_OF_TWO_COLUMNS,
                        "type" => "stack"
                    ]
                ])  
        ])->withMeta([
            "gridder" => [
                "cols" => Gridder::$GRID_STATIC_TWO_COLUMNS
            ]
        ])
    ]
}

$cols = [
    "default" => 1, // On default should use 1 column
    "sm" => 2, // When device is on "sm" then use 2 columns (span)
    "md" => 2, // The same for the next ...
    "lg" => 2,
    "xl" => 2,
    "2xl" => 2,
]

$meta = [
    "gridder => [
        "default" => 1, // means "grid-cols-1"
        "sm" => 2, // means "sm:grid-cols-2"
        "md" => 3, // means "md:grid-cols-3"
        "lg" => 6, // means "lg:grid-cols-6"
        "xl" => 12, // means "xl:grid-cols-12"
        "2xl" => 12, // means "2xl:grid-cols-12"
    ]
]

$meta = [
    "gridder => [
        "default" => 1, // This means "col-span-1", if there are 1 column available, then will use "100%"
        "sm" => 1, // This means "sm:col-span-1", if at "sm" are 2 columns available, then will use "1/2" 
        "md" => 1, // This means "md:col-span-1", if at "md" are 3 columns available, then will use "1/3"
        "lg" => 3, // This means "lg:col-span-3", if at "lg" are 6 columns available, then will use "1/2"
        "xl" => 3, // This means "xl:col-span-3", if at "xl" are 12 columns available, then will use "1/4"
        "2xl" => 3, // This means "2xl:col-span-3", if at "2xl" are 12 columns available, then will use "1/4"
    ]
]

namespace App\Nova\Grids;

class TwoColumns {
    public static array $GRID = [
        "default" => 1,
        "sm" => 2,
        "md" => 2,
        "lg" => 2,
        "xl" => 2,
        "2xl" => 2,
    ];

    public static array $FULL = [
        "default" => 1,
        "sm" => 2,
        "md" => 2,
        "lg" => 2,
        "xl" => 2,
        "2xl" => 2,
    ];

    public static array $HALF = [
        "default" => 1,
        "sm" => 1,
        "md" => 1,
        "lg" => 1,
        "xl" => 1,
        "2xl" => 1,
    ];
}

use App\Nova\Grids\TwoColumns;

public static function fields()
{
    return [
        Panel::make(__('Details'), [
            Text::make(__('First Name'), 'first_name')
                ->withMeta([
                    "gridder" => [
                        "cols" => TwoColumns::$HALF,
                        "type" => "stack"
                    ]
                ]),

            Text::make(__('Last Name'), 'last_name')
                ->withMeta([
                    "gridder" => [
                        "cols" => TwoColumns::$HALF,
                        "type" => "stack"
                    ]
                ]),

            Text::make(__('Email Address'), 'email')
                ->withMeta([
                    "gridder" => [
                        "cols" => TwoColumns::$FULL,
                        "type" => "stack"
                    ]
                ]),
        ])->withMeta([
            "gridder" => [
                "cols" => TwoColumns::$GRID
            ]
        ])
    ]
}