Symfony UX Typed

编辑此页

Symfony UX Typed 是一个 Symfony 捆绑包，集成了 Typed 到 Symfony 应用程序中。它是 Symfony UX 倡议的一部分。

Typed 是一个完整且易于使用的动画打字文本。只需输入您想要看到的打字字符串，它就会立即生效，无需复杂性。

安装

注意

在开始之前，请确保您已在您的应用中配置了 StimulusBundle。

使用 Composer 和 Symfony Flex 安装捆绑包

        1
        $ composer require symfony/ux-typed
    

如果您正在使用 WebpackEncore，请安装您的 assets 并重启 Encore（如果您正在使用 AssetMapper，则不需要）

        1
2
        $ npm install --force
$ npm run watch
    

用法

Typed 使用字符串列表，并管理在您的页面上键入它们。它附带了许多参数来定制字符串的键入方式：速度、光标、延迟和智能退格是您可以使用的令人难以置信的参数。

Symfony UX Typed 的主要用法是使用其 Stimulus 控制器来初始化 Typed

        1
2
3
4
5
6
        <div>
    I created this UX component because
    <span {{ stimulus_controller('symfony/ux-typed', {
        strings: ['I ❤ Symfony UX', 'Symfony UX is great', 'Symfony UX is easy']
    }) }}></span>
</div>
    

就是这样！Typed 现在显示在 strings 参数中定义的消息。您可以自定义这些消息的键入方式。参数与 typed 库的参数完全相同

        1
2
3
4
5
6
7
8
9
10
11
12
13
        <div>
    I created this UX component because
    <span {{ stimulus_controller('symfony/ux-typed', {
        strings: ['I ❤ Symfony UX', 'Symfony UX is great', 'Symfony UX is easy'],
        smartBackspace: true,
        startDelay: 100,
        backSpeed: 20,
        backDelay: 100,
        loop: true,
        showCursor: true,
        cursorChar: '✨'
    }) }}></span>
</div>
    

扩展 JavaScript 控制器

Symfony UX Typed 允许您使用自定义 Stimulus 控制器扩展其默认行为

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
        // assets/controllers/mytyped_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    initialize() {
        this._onPreConnect = this._onPreConnect.bind(this);
        this._onConnect = this._onConnect.bind(this);
    }

    connect() {
        this.element.addEventListener('typed:pre-connect', this._onPreConnect);
        this.element.addEventListener('typed:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('typed:connect', this._onConnect);
        this.element.removeEventListener('typed:pre-connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        // Typed has not been initialized - options can be changed
        console.log(event.detail.options); // Options that will be used to initialize Typed
        event.detail.options.onBegin = (typed) => {
            console.log("Typed is ready to type cool messages!");
        };
        event.detail.options.onStop = (typed) => {
            console.log("OK. Enough is enough.");
        };
    }

    _onConnect(event) {
        // Typed has just been intialized and you can access details from the event
        console.log(event.detail.typed); // Typed instance
        console.log(event.detail.options); // Options used to initialize Typed
    }
}
    

然后在您的模板中，将您的控制器添加到 HTML 属性

        1
2
3
4
5
6
7
8
9
10
11
        <html lang="en">
    <head>
        <title>Typed</title>
        {# ... #}
    </head>
    <body {{ stimulus_controller('mytyped')|stimulus_controller('symfony/ux-typed', {
        strings: ['...'],
    }) }}>
        {# ... #}
    </body>
</html>
    

注意

请注意在 Typed 控制器之前添加您的控制器，以便它在之前执行并可以正确监听 typed:connect 事件。

向后兼容性承诺

此捆绑包旨在遵循与 Symfony 框架相同的向后兼容性承诺：http://symfony.ac.cn/doc/current/contributing/code/bc.html

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可获得许可。

版本