跳到內容

Symfony UX Typed

編輯此頁

Symfony UX Typed 是一個 Symfony 套件,整合了 Typed 到 Symfony 應用程式中。它是 Symfony UX 計畫 的一部分。

Typed 是一個完整且易於使用的動畫文字輸入效果。只需輸入您想要看到的輸入文字,它就會立即生效,無需複雜的操作。

Typed showing messages

安裝

注意

在開始之前,請確保您的應用程式已設定 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 框架相同的向後相容性承諾:https://symfony.dev.org.tw/doc/current/contributing/code/bc.html

本作品,包括程式碼範例,根據 Creative Commons BY-SA 3.0 授權條款授權。
目錄
    版本