LaravelLivewire状态板

Andrés Santibáñez刚刚发布了一个新的Livewire组件，根据记录的当前状态来显示它们。下面是它的工作原理预览：用法要使用此组件，您必须创建一个新的Livewire组件，该组件扩展自 LivewireStatusBoard 您可以使用make:livewire创建一个新组件。例如， 1php artisan make:livewire SalesOrdersStatusBoard 在SalesOrdersStatusBoard类中，不是从基本LivewireComponent类扩展，而是从LivewireStatusBoard类扩展。另外，删除render方法。您将拥有一个类似于此代码段的类。 1classSalesOrdersStatusBoardextendsLivewireCalendar2{3//4} 在此类中，您必须重写以下方法以显示数据 1publicfunctionstatuses() :Collection2{3//4}56publicfunctionrecords() :Collection7{8//9} 正如您可能注意到的，这两个方法都返回一个集合。statuses()指的是所有不同的状态值您的数据可能在不同的时间点。records()另一方面，代表您要显示的数据，这些数据可以是以前定义的statuses()集合中的任何一个。要显示这两种方法是如何协同工作的，让我们讨论一个销售订单的示例及其在销售过程中的不同状态：已注册、等待确认、已确认、已交付。每个销售订单在特定时间可能处于不同的状态。对于这个例子，我们可以为statuses() 1publicfunctionstatuses() :Collection 2{ 3returncollect([ 4[>> 7], 8[>11],12[15],16[19],20]);21} 定义以下集合对于我们定义的每个status，我们必须返回一个至少有2个键的数组：id和title。现在，对于records()，我们可以定义一个销售订单列表，该列表来自我们项目中的一个有说服力的模型在上面的代码片段中，我们必须返回数组项的集合，其中每个项必须至少有 3个键：id、title和status。最后一个是最重要的，因为它将用于匹配record所属的 status。对于这个问题，组件将status和records与下面的比较相匹配要在视图中呈现组件，只需使用Livewire标记或include syntax 1 GitHub项目自述文件涵盖了如何使用它的所有细节，如果您需要快速创建UI的方法状态，这是一个添加到您的武器库。

LaravelLivewire状态板

CSS无头WordPress到底有多合适？

CSS制作带有粘性页眉和页脚的表格变得更容易了

CSS技巧编年史XXXX

CSS使用子资源完整性保护您的网站

CSS联合的可能性

CSS在开放细节元素上添加背景

CSS容器查询的聚宝盆

CSS target=blank

CSS查看WCAG 2.5.5以获得更好的目标尺寸

CSS Trickz：Netlify随需应变构建器的实验