欧宝娱乐app下载地址Symfony用户体验类型
编辑本页欧宝娱乐app下载地址Symfony用户体验类型
欧宝娱乐app下载地址Symfony UX Typed是一个Symfony bundle集成输入在Sy欧宝娱乐app下载地址mfony应用程序中。它是Symf欧宝娱乐app下载地址ony UX计划.
类型化是一个完整的和易于使用的动画类型化文本。只需输入您想要输入的字符串,它就可以轻松运行。
安装
在你开始之前,确保你有欧宝娱乐app下载地址在你的应用中配置Symfony UX.
然后使用Composer和Symfony Flex安装包:欧宝娱乐app下载地址
1 2 3 4 5 6 7 8 9
$跨度>作曲家需要symfony/ux类型欧宝娱乐app下载地址<跨度类="hljs-comment">不要忘记安装JavaScript依赖项并进行编译跨度><跨度类="hljs-prompt">$跨度>NPM install——force<跨度类="hljs-prompt">$跨度>NPM运行监视<跨度类="hljs-comment">#或用纱线跨度><跨度类="hljs-prompt">$跨度>纱线安装力<跨度类="hljs-prompt">$跨度>纱看
另外,请确保您拥有至少3.2.1的版本@欧宝娱乐app下载地址symfony / stimulus-bridge在你的package.json
文件。
使用
类型化工作使用字符串列表,并将管理在您的页面上键入它们。它提供了很多参数来定制字符串的输入方式:速度、游标、延迟和智能退格是一些你可以使用的不可思议的参数。
Symfony UX Typed的主欧宝娱乐app下载地址要用途是使用它的Stimulus控制器来初始化Typed:
1 2 3 4 5 6
<<跨度类="hljs-name">div跨度>>跨度>我创建这个用户体验组件是因为<跨度类="hljs-tag"><<跨度类="hljs-name">跨度跨度>跨度>跨度><跨度类="hljs-template-variable">{{stimulus_controller('s欧宝娱乐app下载地址ymfony/ UX -typed', {strings: ['I❤symfony UX', 'symfony UX很棒','symfony UX很简单']})}}跨度><跨度类="xml">>跨度><跨度类="hljs-tag"><跨度类="hljs-name">跨度跨度>>跨度><跨度类="hljs-tag"><跨度类="hljs-name">div跨度>>跨度>跨度>
就是这样!typing现在显示在字符串参数中定义的消息。您可以自定义这些消息的输入方式。参数与“类型化库”的参数完全相同
12 3 4 5 6 7 8 9 10 11 12 13
<<跨度类="hljs-name">div跨度>>跨度>我创建这个用户体验组件是因为<跨度类="hljs-tag"><<跨度类="hljs-name">跨度跨度>跨度>跨度><跨度类="hljs-template-variable">{{stimulus_controller('s欧宝娱乐app下载地址ymfony/ 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: '✨'})}}跨度><跨度类="xml">>跨度><跨度类="hljs-tag"><跨度类="hljs-name">跨度跨度>>跨度><跨度类="hljs-tag"><跨度类="hljs-name">div跨度>>跨度>跨度>
扩展JavaScript控制器
欧宝娱乐app下载地址Symfony UX Typed允许您使用自定义刺激控制器扩展其默认行为:
12 34 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
/ /资产/控制器/ mytyped_controller.js跨度><跨度类="hljs-keyword">进口跨度>{控制器}<跨度类="hljs-keyword">从跨度><跨度类="hljs-string">“@hotwired /刺激”跨度>;<跨度类="hljs-keyword">出口跨度><跨度类="hljs-keyword">默认的跨度><跨度类="hljs-class">类跨度><跨度类="hljs-keyword">扩展跨度><跨度类="hljs-title">控制器跨度>跨度>{初始化(){<跨度类="hljs-keyword">这跨度>._onPreConnect =<跨度类="hljs-keyword">这跨度>._onPreConnect.bind (<跨度类="hljs-keyword">这跨度>);<跨度类="hljs-keyword">这跨度>._onConnect =<跨度类="hljs-keyword">这跨度>._onConnect.bind (<跨度类="hljs-keyword">这跨度>);} connect() {<跨度类="hljs-keyword">这跨度>.element.addEventListener (<跨度类="hljs-string">“类型:pre-connect”跨度>,<跨度类="hljs-keyword">这跨度>._onPreConnect);<跨度类="hljs-keyword">这跨度>.element.addEventListener (<跨度类="hljs-string">类型:连接的跨度>,<跨度类="hljs-keyword">这跨度>._onConnect);} disconnect() {<跨度类="hljs-comment">//当控制器断开连接时,应该总是删除监听器以避免副作用跨度><跨度类="hljs-keyword">这跨度>.element.removeEventListener (<跨度类="hljs-string">“类型:pre-connect”跨度>,<跨度类="hljs-keyword">这跨度>._onConnect);<跨度类="hljs-keyword">这跨度>.element.removeEventListener (<跨度类="hljs-string">类型:连接的跨度>,<跨度类="hljs-keyword">这跨度>._onPreConnect);} _onPreConnect(事件){<跨度类="hljs-comment">//类型没有初始化-选项可以改变跨度><跨度类="hljs-built_in">控制台跨度>.log (event.detail.options);<跨度类="hljs-comment">//用于初始化类型化的选项跨度>event.detail.options.onBegin =<跨度类="hljs-function">(<跨度类="hljs-params">输入跨度>) = >跨度>{<跨度类="hljs-built_in">控制台跨度>.log (<跨度类="hljs-string">“输入完毕,可以输入很酷的消息了!”跨度>);});event.detail.options.onStop =<跨度类="hljs-function">(<跨度类="hljs-params">输入跨度>) = >跨度>{<跨度类="hljs-built_in">控制台跨度>.log (<跨度类="hljs-string">“好吧。适可而止。”跨度>);});} _onConnect(事件){<跨度类="hljs-comment">// Typed刚刚被初始化,您可以从事件中访问详细信息跨度><跨度类="hljs-built_in">控制台跨度>.log (event.detail.typed);<跨度类="hljs-comment">//类型实例跨度><跨度类="hljs-built_in">控制台跨度>.log (event.detail.options);<跨度类="hljs-comment">//用于初始化Typed的选项跨度>}}
然后在模板中,将控制器添加到HTML属性中:
12 3 4 5 6 7 8 9 10 11 12
<<跨度类="hljs-name">超文本标记语言跨度><跨度类="hljs-attr">朗跨度>=<跨度类="hljs-string">“en”跨度>>跨度><跨度类="hljs-tag"><<跨度类="hljs-name">头跨度>>跨度><跨度类="hljs-tag"><<跨度类="hljs-name">标题跨度>>跨度>输入<跨度类="hljs-tag"><跨度类="hljs-name">标题跨度>>跨度>跨度><跨度类="hljs-comment">{#……#}跨度><跨度类="xml"><跨度类="hljs-name">头跨度>>跨度><跨度类="hljs-tag"><<跨度类="hljs-name">身体跨度>跨度>跨度><跨度类="hljs-template-variable">{{stimulus_controller ({mytyped: {}, sy欧宝娱乐app下载地址mfony / ux-typed ': {} }) }}跨度><跨度类="xml">>跨度>跨度><跨度类="hljs-comment">{#……#}跨度><跨度类="xml"><跨度类="hljs-name">身体跨度>>跨度><跨度类="hljs-tag"><跨度类="hljs-name">超文本标记语言跨度>>跨度>跨度>
请注意跨度>
注意添加控制器之前类型的控制器,以便它在类型:连接
正常事件。
向后兼容承诺
这个包旨在遵循与Symfony框架相同的向后兼容性承诺:欧宝娱乐app下载地址https://欧宝娱乐app下载地址www.oldmanjams.com/doc/current/contributing/code/bc.html
此工作,包括代码示例,是根据创作共用BY-SA 3.0许可证。