This Yii Framework extension encapsulates basic functions [htmx] and makes using in Yii applications extremely easy.
You can see examples in yii3-demo-htmx application.
- The preferred way to install this extension is through composer.
php composer.phar require nkondrashov/yii3-htmx "^0.2"
- Add
HTMXMiddleware.phpto router.
->middleware(HTMXMiddleware::class)- Register asset in main layout or
AppAsset
$assetManager->register(HTMXAsset::class);- Add to
<body>tag attributehx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}'for success post requests. Like this:
<body hx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}'>Using the npm-asset package manager.
Run the following command at the root directory of your application.
npm i [email protected]Simple:
<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);
$htmx = HTMX::make($tag)
->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
->setSwap('none')
->runOnClick();
if (!$todo->is_complete) {
$htmx->addConfirm('Are you sure?');
}
echo $htmx;
?><?= HTMX::make(Yiisoft\Html\Html::tag('div'))
->request(Yiisoft\Http\Method::GET, '/item/index')
->runOnCustomEvent('someCustomEvent', 'someCustomEvent2')
->runOnLoad();?>More native:
<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);
$htmx = HTMX::make($tag)
->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
->addTriggers('click')
->setSwap('none');
if (!$todo->is_complete) {
$htmx->addConfirm('Are you sure?');
}
echo $htmx;
?><?= HTMX::make(Yiisoft\Html\Html::tag('div'))
->request(Yiisoft\Http\Method::GET, '/item/index')
->addTriggers('load','someCustomEvent from:body', 'someCustomEvent2 from:body');
?>Max native:
<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);
$htmx = HTMX::make($tag)
->setHx('delete', '/item/delete/' . $todo->id)
->setHx('trigger', 'click')
->setHx('swap', 'none');
if (!$todo->is_complete) {
$htmx->setHx('conf', 'Are you sure?');
}
echo $htmx;
?><?= HTMX::make(Yiisoft\Html\Html::tag('div'))
->setHx('get', '/item/index')
->setHx('trigger', 'load, someCustomEvent from:body, someCustomEvent2 from:body');
?>Send htmx headers in response:
//Definition:
...
public function __construct(private HTMXHeaderManager $headerManager)
{}
...
//In code:
$this->headerManager->triggerCustomEventAfterSwap('updateList');
//or native:
$this->headerManager->sendHXHeader('Trigger', 'updateList');
//Detect htmx request:
if ($this->headerManager->isHtmxRequest()) {
//Example: This request without htmx header
}
//Get data from header:
$value = $this->headerManager->getRequestHeader('Hx-Trigger-Name');
The Yii Framework htmx Extension is free software. It is released under the terms of the BSD License.
Please see LICENSE for more information.
This package maintained by Me ¯_(ツ)_/¯