flixtechs-labs/stimulus-extra

缺失的用于 Turbo 和 Stimulus 的 Laravel Blade 辅助函数

0.0.5 2024-03-15 19:43 UTC

This package is auto-updated.

Last update: 2024-09-28 12:36:24 UTC


README

Total Downloads Latest Stable Version License

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

许可

MIT