PHP code example of zvizvi / filament-flexbox

    
        
<?php
require_once('vendor/autoload.php');

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

    

zvizvi / filament-flexbox example snippets

use Zvizvi\FilamentFlexbox\Components\Flexbox;
use Zvizvi\FilamentFlexbox\Components\FlexItem;

Flexbox::make([
    FlexItem::make([TextInput::make('first_name')]),
    FlexItem::make([TextInput::make('last_name')]),
])

Flexbox::make([
    // ...
])->applyItemFlexDefaults();

// Alias:
Flexbox::make([
    // ...
])->itemDefaults();

Flexbox::make([
    // ...
])->applyItemFlexDefaults(false);

// Horizontal (default)
Flexbox::make([...])->row()

// Vertical
Flexbox::make([...])->column()

// Or use direction() method
Flexbox::make([...])->direction('row-reverse')
Flexbox::make([...])->direction('column-reverse')

Flexbox::make([...])->wrap()

Flexbox::make([...])->justify('start')    // justify-content: flex-start
Flexbox::make([...])->justify('end')      // justify-content: flex-end
Flexbox::make([...])->justify('center')   // justify-content: center
Flexbox::make([...])->justify('between')  // justify-content: space-between
Flexbox::make([...])->justify('around')   // justify-content: space-around
Flexbox::make([...])->justify('evenly')   // justify-content: space-evenly

Flexbox::make([...])->align('start')      // align-items: flex-start
Flexbox::make([...])->align('end')        // align-items: flex-end
Flexbox::make([...])->align('center')     // align-items: center
Flexbox::make([...])->align('baseline')   // align-items: baseline
Flexbox::make([...])->align('stretch')    // align-items: stretch

Flexbox::make([...])->spacing('none')  // gap: 0
Flexbox::make([...])->spacing('xs')    // gap: 0.25rem
Flexbox::make([...])->spacing('sm')    // gap: 0.5rem
Flexbox::make([...])->spacing('md')    // gap: 1rem (default)
Flexbox::make([...])->spacing('lg')    // gap: 1.5rem
Flexbox::make([...])->spacing('xl')    // gap: 2rem

// Stack vertically on mobile, horizontal from md breakpoint
Flexbox::make([...])->from('md')

use Zvizvi\FilamentFlexbox\Components\FlexItem;

FlexItem::make([
    TextInput::make('name'),
])->flexGrow(2)

FlexItem::make([
    TextInput::make('email'),
])->flexShrink(0)

FlexItem::make([
    TextInput::make('phone'),
])->flexBasis('200px')

FlexItem::make([
    TextInput::make('company'),
])->flex('1 0 240px')

FlexItem::make([
    TextInput::make('website'),
])->flex(2)

FlexItem::make([
    TextInput::make('zipcode'),
])->flex('240px')

// Responsive values (breakpoints: default, sm, md, lg, xl, 2xl)
FlexItem::make([
    TextInput::make('notes'),
])->flexGrow([
    'default' => 1,
    'md' => 2,
    'xl' => 3,
])

FlexItem::make([
    TextInput::make('sidebar'),
])->flex([
    'default' => '1 1 auto',
    'lg' => '0 0 320px',
])

FlexItem::make([
    TextInput::make('address'),
])->minWidth(240)->maxWidth('420px')

use Zvizvi\FilamentFlexbox\Components\Flexbox;
use Zvizvi\FilamentFlexbox\Components\FlexItem;

Flexbox::make([
    FlexItem::make([
        Section::make([
            TextInput::make('title'),
            Textarea::make('content'),
        ]),
    ])->flexGrow(2),

    FlexItem::make([
        Section::make([
            Toggle::make('is_published'),
            Toggle::make('is_featured'),
        ]),
    ])->flexShrink(0)->flexBasis('300px'),
])
->row()
->wrap()
->justify('between')
->align('start')
->spacing('lg')
->from('md')