PHP code example of middag-io / ui
1. Go to this page and download the library: Download middag-io/ui 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/ */
middag-io / ui example snippets
// index page with default columns, actions, pagination
$contract = PageBuilder::crud(Invoice::class)->build('index', [
'rows' => $invoices,
'pagination' => ['page' => 1, 'perPage' => 25, 'total' => 100, 'lastPage' => 4],
]);
$contract = CrudBuilder::for(Invoice::class, slug: 'invoices')
->without('show')
->columns(['number', 'status', 'amount', 'due_date'])
->column('status', fn (array &$col) => $col['variant'] = 'badge')
->filters([new FilterDefinition(key: 'status', label: 'Status')])
->searchable() // or mark a column searchable in its configurator
->sort('due_date', 'asc')
->perPage(50)
->i18n(domain: 'local_app') // titles as i18n intent; falls back to literal nouns
->label('Invoice', 'Invoices') // or override the noun explicitly
->build('index', ['rows' => $invoices]);
$contract = PageBuilder::page('invoices.show')
->title('Invoice #1234')
->subtitle('Due Jan 31')
->shell('product')
->layout('split')
->breadcrumbs(fn ($bc) => $bc->item('Invoices', '/invoices')->current('#1234'))
->actions([
PageBuilder::action('pay', 'Mark Paid', ActionTarget::request('/invoices/1234/pay'), ActionIntent::PRIMARY),
])
->region('content', [
BlockBuilder::detailPanel('invoice.detail', $sections),
])
->region('aside', [
BlockBuilder::activityTimeline('invoice.activity', $groups),
])
->build();
return $this->inertia('Page', PageBuilder::page('orders.create')
->title('New Order')
->overlay()
->help('Creating an order', 'Fill in the details below.')
->inspector('/api/products/{id}')
->toProps());
// toProps() returns: ['contract' => ..., 'overlay' => true, 'help' => [...], 'inspector' => ...]
use Middag\Ui\Region\Fragment;
use Middag\Ui\Region\RegionUpdate;
// after a filter/paginate, swap a region's content without reloading the page
$fragment = Fragment::region(RegionUpdate::replace('orders', $block1, $block2));
// {version: '1', kind: 'region', payload: {region: 'orders', mode: 'replace', blocks: [...]}}
use Middag\Ui\Action\ActionResult;
return new ActionResult(
fragments: [Fragment::table($tableConfig)], // push: server already built the fresh piece
refreshBlocks: ['sidebar'], // pull: client re-fetches these keys itself
);
->region('content', function ($r) {
$r->metricCard('revenue', 42000, 'Revenue', delta: '+8%')
->denseTable('orders', ['id', 'total'], $rows)
->emptyState('no-results', variant: 'filtered');
})
$node = new NavigationNode(
key: 'audience.segments.index',
label: 'Segments',
icon: 'users',
href: '/segments',
active: true,
weight: 10,
);
// Registered in AbstractNavigationRegistry implementations (in framework)
$section = Section::of('personal')
->label(Translatable::of('personal_info_section', 'forms')) // or a literal string
->fields($nameField, $emailField, Group::of('phone')->fields($countryCode, $number));
$config = TableBuilder::make()
->column('name', 'Name', ['sortable' => true, 'searchable' => true])
->column('amount', 'Amount', ['sortable' => true, 'format' => ValueFormat::CURRENCY, 'formatOptions' => ['currency' => 'BRL']])
->filter('status', 'Status', FilterType::SELECT, [
['value' => 'active', 'label' => 'Active'],
['value' => 'inactive', 'label' => 'Inactive'],
])
->rowAction(PageBuilder::action('edit', 'Edit', ActionTarget::link('/invoices/{id}/edit')))
->bulkAction(PageBuilder::action('delete', 'Delete', ActionTarget::request('/invoices/bulk/delete'), ActionIntent::DANGER))
->options(new TableOptions(perPage: 25, sortColumn: 'name', selectable: true))
->build();