Private
Public Access
50 lines
1.9 KiB
PHP
50 lines
1.9 KiB
PHP
<section class="section">
|
|
<h1>Toolbox Backports</h1>
|
|
<p>Small reusable primitives lifted from downstream applications after generalizing them for the starter.</p>
|
|
|
|
<h2>Action buttons</h2>
|
|
<p>Inspired by <code>htmx-crud-starter</code>'s URL button helper: route-aware buttons with optional confirmation and htmx attributes.</p>
|
|
<div style="display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:1rem 0;">
|
|
<?= component('basic/action-button', [
|
|
'label' => 'Open Dashboard',
|
|
'route' => 'dashboard',
|
|
'variant' => 'primary',
|
|
]) ?>
|
|
<?= component('basic/action-button', [
|
|
'label' => 'Confirmable Action',
|
|
'route' => 'toolbox',
|
|
'confirm' => 'This is only a demo. Continue?',
|
|
]) ?>
|
|
<?= component('basic/action-button', [
|
|
'label' => 'HTMX-shaped Button',
|
|
'route' => 'toolbox',
|
|
'tag' => 'button',
|
|
'htmx' => true,
|
|
'method' => 'get',
|
|
'target' => '#toolbox-demo-target',
|
|
'push_url' => false,
|
|
]) ?>
|
|
</div>
|
|
<div id="toolbox-demo-target" class="card" style="padding:1rem;">Target placeholder for htmx-enabled apps.</div>
|
|
|
|
<h2>Info pill</h2>
|
|
<p>Backported from the training platform for terse labels that reveal explanatory context on hover or keyboard focus.</p>
|
|
<p>
|
|
Course summary
|
|
<?= component('basic/info-pill', [
|
|
'label' => 'Why this matters',
|
|
'content_html' => '<p>'.safe('Keep dense tables readable while preserving nearby detail for users who need it.').'</p>',
|
|
]) ?>
|
|
</p>
|
|
|
|
<h2>Tile grid</h2>
|
|
<p>Inspired by <code>my.kautschuk.com</code>'s image tile navigation component.</p>
|
|
<?= component('navigation/tile-grid', [
|
|
'items' => [
|
|
['caption' => 'Themes', 'description' => 'Compare visual shells', 'url' => 'themes', 'image' => 'img/cat01.jpg'],
|
|
['caption' => 'Workspace', 'description' => 'Admin shell primitives', 'url' => 'workspace', 'image' => 'img/cat02.jpg'],
|
|
['caption' => 'Gauges', 'description' => 'KPI visualization', 'url' => 'gauges', 'image' => 'img/cat03.jpg'],
|
|
],
|
|
]) ?>
|
|
</section>
|