Spiral toolkit includes set of virtual tags, frontend library and resource manager.
Elements included
- ajax forms
- input
- static
- selectbox
- switch
- textarea
- radios and check boxes
- paginator element
- simple grid element with paginator
- simple cell
- numeric cell
- boolean cell
- bytes (size) cell
Toolkit JS and CSS:
To enable Toolkit widgets in your views and connect appropriate CSS/JS files use following code:
<dark:use bundle="spiral:bundle"/>
<toolkit:styles/>
<toolkit:scripts/>Examples
Grids:
<spiral:grid source="<?= $selector ?>" as="sample" style="margin-top: 20px;">
<!-- Simple grids only need column title and value-->
<grid.cell title="ID" value="<?= $sample->id ?>"/>
<!-- Custom classes, styles and etc are still possible and behave as in regular tags -->
<grid.cell title="Status" value="<?= $sample->status ?>" style="font-weight: bold;"/>
<!-- We can use short function e() to escape unsafe values -->
<grid.cell title="Name" value="<?= e($sample->name) ?>"/>
<!-- Size of property "content" in bytes, this is prepared cell type (see bool, bytes and number) -->
<grid.cell.bytes title="Content Size" value="<?= strlen($sample->content) ?>"/>
<!-- Most of elements can be used by multiple aliases (grid: vs grid.) -->
<grid:cell.number title="Sample value" value="<?= $sample->child->value ?>"/>
<!-- Some cells can be defined using tag context -->
<grid:cell>
<a href="<?= uri('sample::edit', ['id' => $sample->id]) ?>">Edit element</a>
</grid:cell>
</spiral:grid>Forms:
<spiral:form action="/sample/save/<?= $entity->id ?>" style="margin-top: 20px;">
<form.input label="Name" name="name" value="<?= e($entity->name) ?>"/>
<form.select label="Status" name="status" values="<?= [
'active' => 'Active',
'disabled' => 'Disabled'
] ?>" value="<?= $entity->status ?>"/>
<form.textarea label="Content" name="content" value="<?= e($entity->content) ?>"/>
<form.input label="Value" name="value" value="<?= $entity->child->value ?>"/>
<input type="submit" class="btn btn-default" value=" <?= $entity->isLoaded() ? 'Update' : 'Create' ?>"/>
</spiral:form>Make sure to import toolkit bundle and styles to your views:
<dark:use bundle="spiral:bundle"/>
<toolkit:styles/>
<toolkit:scripts/>