Symfony UX 的核心部分

Stimulus Bundle

连接 Stimulus、UX 包、Asset Mapper、Webpack Encore... 让您可以轻松地为 您的 Symfony 应用程序添加 JavaScript 交互!

设计简洁

无缝集成

性能优化

懒加载

Web 标准

Stimulus Twig 助手

stimulus_controller

此函数将 Stimulus 控制器附加到 HTML 元素,并允许传递可在控制器内访问的值(通过 data-attributes)。

这些值对于向控制器的逻辑提供动态数据或配置非常有用。

<div {{ stimulus_controller('userProfile', {userId: 42, theme: 'dark'}) }}>
    Welcome to your profile!
</div>

{# would render as #}

<div data-controller="userProfile" data-user-profile-user-id-value="42"
     data-user-profile-theme-value="dark">
    Welcome to your profile!
</div>

stimulus_target

此函数在 Stimulus 控制器中定义一个或多个目标。这些目标允许您直接从控制器的逻辑与特定的 DOM 元素进行交互。

<div {{ stimulus_controller('userProfile') }}>
    <span {{ stimulus_target('userProfile', 'name') }}>John Doe</span>
    <span {{ stimulus_target('userProfile', 'avatar') }}>
        <img src="avatar.jpg" alt="John's Avatar">
    </span>
</div>

{# would render as #}

<div data-controller="userProfile">
    <span data-user-profile-target="name">John Doe</span>
    <span data-user-profile-target="avatar">
        <img src="avatar.jpg" alt="John's Avatar">
    </span>
</div>

stimulus_action

此函数将事件监听器附加到 HTML 元素,定义触发控制器中特定方法的操作。

这通过将 DOM 事件(如 clickinput 等)直接映射到控制器方法,简化了事件处理,提高了代码的清晰度和可维护性。

<button {{ stimulus_action('userProfile', 'save', 'click') }}>
    Save Profile
</button>

{# would render as #}

<button data-action="click->userProfile#save">
    Save Profile
</button>

安装它

$ composer require symfony/stimulus-bundle