Symf欧宝娱乐app下载地址ony的UX倡议和包
编辑该页面警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.4,不再维护。
读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.3(当前的稳定版本)。
Symf欧宝娱乐app下载地址ony的UX倡议和包
欧宝娱乐app下载地址Symfony用户体验是一个倡议和组库JavaScript工具无缝集成到您的应用程序。例如,想要呈现一个图表Chart.js吗?使用用户体验Chart.js在PHP构建图表。为您自动处理JavaScript。
在幕后,用户体验包杠杆刺激:一个小,但强大的JavaScript库绑定功能页面上的元素。
安装Symfony用户欧宝娱乐app下载地址体验
在你安装任何特定的用户体验图书馆之前,确保您已经安装了Webpack安可。
如果你已经安装了它,确保你有一个资产/ bootstrap.js
这个初始化文件(刺激&用户体验包),一个资产/ controllers.json
这个控制文件(第三方用户体验包你安装).enableStimulusBridge(“。/资产/ controllers.json”)
在你的webpack.config.js
文件。如果这些人失踪,尝试升级欧宝娱乐app下载地址symfony / webpack-encore-bundle
Flex配方。看到升级Flex食谱。
所有Sy欧宝娱乐app下载地址mfony UX包
- ux-turbo:集成涡轮驱动对于一个single-page-app经验
- ux-live-componentJavaScript:构建动态接口与零
- ux-twig-component:构建树枝组件由一个PHP类
- ux-chartjs与Chart.js:简单的图表
- ux-lazy-image与BlurHash:优化图片加载
- ux-cropperjs:表单类型和工具裁剪图像
- ux-dropzone:程式化的表单类型文件上传的“下降区”
- ux-swup:与Swup集成
刺激世界各地的工具
因为刺激开发人员使用Symfony之外,许多工具存在超越用户体验包:欧宝娱乐app下载地址
- stimulus-use:添加可组合的行为刺激控制器,消除抖动,检测外点击和许多其他的事情。
- stimulus-components大量的预制刺激控制器,比如复制到剪贴板,可分类的,弹出窗口(类似于工具提示)等等。
Symfony用户欧宝娱乐app下载地址体验是如何工作的呢?
当你安装一个用户体验的PHP包,Symfony Flex将自动更新欧宝娱乐app下载地址package.json
文件指向一个“虚拟包”,住在PHP包。例如:
1 2 3 4 5 6
{“devDependencies”:{“…”:”“,“@欧宝娱乐app下载地址symfony / ux-chartjs”:“文件:供应商/ symf欧宝娱乐app下载地址ony / ux-chartjs /资源/资产”}}
这给了你一个真正的(如节点包。@欧宝娱乐app下载地址symfony / ux-chartjs
),而不是下载,直接指向文件已经在你的生活供应商/
目录中。
Flex配方也通常会更新你资产/ controllers.json
文件来添加一个新的刺激控制器应用程序。例如:
1 2 3 4 5 6 7 8 9 10 11
{“控制器”:{“@欧宝娱乐app下载地址symfony / ux-chartjs”:{“图”:{“启用”:真正的,“获取”:“渴望”}}},“entrypoints”:[]}
最后,你的资产/ bootstrap.js
文件处理@欧宝娱乐app下载地址symfony / stimulus-bridge-包会自动注册:
- 所有文件在
资产/控制器/
刺激控制器; - 和所有控制器中描述
资产/ controllers.json
作为刺激控制器。
最终的结果:你安装一个包,你立即刺激控制器可用!在本例中,它被称为@欧宝娱乐app下载地址symfony / ux-chartjs /图表
。从技术上讲,它将被调用欧宝娱乐app下载地址symfony——ux-chartjs图表
。不过,您可以通过原来的名字进入{{stimulus_controller ()}}
从WebpackEncoreBundle函数,它将规范化:
1 2 3 4
<div{{stimulus_controller (@s欧宝娱乐app下载地址ymfony / ux-chartjs /图)}}>< !——将呈现为:- - ><div数据控制器=“欧宝娱乐app下载地址symfony——ux-chartjs图”>
懒惰的控制器
默认情况下,所有的控制器(即文件资产/控制器/
+控制器资产/ controllers.json
每一页)将下载和加载。
有时你可能有一个控制器,只用于一些页面,或者只在你的管理区域。在这种情况下,你可以让控制器“懒惰”。当一个控制器是懒惰的,它是不下载初始页面加载。相反,当一个元素出现在页面匹配控制器(如。< div数据控制器= "你好" >
),控制器和其他进口将lazyily-loaded通过Ajax。
让你的自定义控制器懒惰,添加一个特殊的评论:
1 2 3 4 5 6
进口{控制器}从“@hotwired /刺激”;/ * stimulusFetch:‘懒惰’* /出口默认的类扩展控制器{/ /……}
做一个第三方控制器懒惰,资产/ controllers.json
,设置获取
来懒惰的
。
更高级的设置
学习更高级的选项,读到@欧宝娱乐app下载地址symfony / stimulus-bridge节点计划,负责大量的魔法。