flixtechs-labs / stimulus-extra
缺失的用于 Turbo 和 Stimulus 的 Laravel Blade 辅助函数
0.0.5
2024-03-15 19:43 UTC
Requires
- php: ^8.0
- hotwired-laravel/stimulus-laravel: ^0.3|^1.1
- illuminate/support: ^7.0|^8.0|^9.23|^10.0|^11.0
Requires (Dev)
- laravel/pint: ^1.1
- orchestra/testbench: ^7.6
- pestphp/pest: ^1.21
- phpstan/phpstan: ^1.8
README
Stimulus Laravel 辅助函数
缺失的用于 Laravel Blade 的 Stimulus 辅助函数!此包包含一些与 hotwired/stimulus-laravel
包搭配得很好的辅助函数。受 Symfony UX Stimulus 的启发。
安装
composer require flixtechs-labs/stimulus-extra
用法
主要有 3 个主要的辅助函数
stimulus_controller()
添加控制器stimulus_action()
指定动作stimulus_target()
指定目标
<div {{ stimulus_controller('say-hello') }}> <input type="text" {{ stimulus_target('say-hello', 'name') }}> <button {{ stimulus_action('say-hello', 'greet') }}> Greet </button> <div {{ stimulus_target('say-hello', 'output') }}></div> </div>
stimulus_controller('say-hello')
会渲染一个 data-controller="say-hello"
属性。当这个元素出现在页面上时,Stimulus 会自动寻找并初始化一个名为 say-hello-controller.js
的控制器。在您的 resources/js/controllers/
目录中创建它。
// resources/js/controllers/say_hello_controller.js import { Controller } from '@hotwired/stimulus'; export default class extends Controller { static targets = ['name', 'output'] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
测试
composer test