README

Laravel blade 指令和 php 辅助函数，用于基于浏览器窗口大小（不使用 css）的服务端渲染内容。需要 Livewire 和 AlpineJS

以下是一个展示此包用途的示例

<?php

if(windowXs() || mobileDevice()) {
 //execute a tiny Eloquent query and return a minimalistic view
}
if(window2xl()) {
 //execute a huge Eloquent query and return a gigantic view
}

要求

php 8
Laravel 8
Livewire
AlpineJS

您想要一个纯 JavaScript 版本吗？

此包有一个基于 Laravel/VanillaJS 的版本。链接 >>>

描述

此包的主要目的不是避免重复的 HTML，而是避免不必要的服务器端代码执行，只渲染永远不会被看到的内容。

AlpineJS 在浏览器窗口大小调整时，实时（防抖 750ms）同步浏览器内 width 和 height。
相应的 Livewire 组件将值存储到 Laravel Session 中。
此包有一个 config/breakpoints 文件，您可以在此设置断点。
此包提供了多个 @blade 指令和 Laravel helpers()。
您可以通过 session('windowW') 和 session('windowH') 访问浏览器窗口宽度/高度。
此包还提供了一个 HasBreakpoints 特性，用于设置和获取动态断点以覆盖配置。
您可以通过 Laravel Config::set(...) 动态更改配置。

重要说明

了解此包提供的服务器端渲染断点与 css 媒体查询之间的区别很重要。

当使用 css 时，页面内容会实时更新，因为用户调整窗口大小，而此包会防抖网络请求。

如果您使用 Livewire，组件将在下一次请求时更新，否则页面将在下一次页面请求时更新。

非常重要，您需要将 <livewire:breakpoints /> 放在用户接触应用程序的第一点，以确保应用程序看起来最好。我在 app.blade.php 和 login/register 页面上都有它。

安装

composer require tanthammar/livewire-window-size

发布配置

php artisan vendor:publish --tag=livewire-window-size

默认设置基于 TailwindCSS 断点

'window-width' => [
    // 0 = undefined|false
    // @windowXs (>= 1px && < Sm)
    'Sm' => 640, // => @windowSm (>= 640px && < Md)
    'Md' => 768, // => @windowMd (>= 768px && < Lg)
    'Lg' => 1024, // => @windowLg (>= 1024px && < Xl)
    'Xl' => 1280, // => @windowXl (>= 1280px && < 2xl)
    '2xl' => 1536, // => @window2xl (>= 1536px)
],

将组件添加到布局中

将此添加到您想要跟踪浏览器窗口大小的所有布局中。
您将通过 session('windowW') 和 session('windowH') 访问浏览器窗口宽度/高度。

示例： app.blade.php

<livewire:breakpoints />

Blade 指令

@elsif..., @else..., @end..., @unless... 和 @endif 与所有指令一起工作。解释请参阅 Laravel 文档。

//Browser width, with example values
@windowWidthLessThan(400)
@windowWidthGreaterThan(399)
@windowWidthBetween(400, 1500)

//Browser height, with example values
@windowHeightLessThan(500)
@windowHeightGreaterThan(499)
@windowHeightBetween(400, 900)

//Breakpoints based on config values
@windowXs()
@windowSm()
@windowMd()
@windowLg()
@windowXl()
@window2xl()

示例

@windowXs()
<div>This window is extra small</div>
@endif

@window2xl()
<div>This window is very large</div>
@endif

辅助函数

与 Blade 指令同名

//Mobile device detection based on request header.
mobileDevice()

//Browser width, with example values
windowWidthLessThan(400)
windowWidthGreaterThan(399)
windowWidthBetween(400, 1500)

//Browser height, with example values
windowHeightLessThan(500)
windowHeightGreaterThan(499)
windowHeightBetween(400, 900)

//Breakpoints based on config values
windowXs()
windowSm()
windowMd()
windowLg()
windowXl()
window2xl()

示例 php

if(windowXs()) {
 //execute a tiny Eloquent query and return a minimalistic view
}
if(window2xl()) {
 //execute a huge Eloquent query and return a gigantic view
}

HasBreakpoints 特性

将特性添加到组件中，以导入配置值并动态获取/设置自定义断点。

use Tanthammar\LivewireWindowSize\HasBreakpoints;

class Foo extends \Livewire\Component
{
    use HasBreakpoints;
    ...
}

Blade 指令测试组件

将此添加到任何 blade 视图中以测试 blade 指令

<x-breakpoints::test-windowsize />

💬 让我们建立联系

与其他 tall-form 用户在官方 Livewire Discord 频道中讨论。您可以在 "partners/tall-forms" 频道中找到我。

🔗 Discord
🔗 Twitter
🔗 YouTube
🔗 Devdojo
🔗 如果您喜欢我的工作，请 💗 赞助我。

变更日志

请查看变更日志获取更多最近更改的信息。

贡献

请查看贡献指南了解详情。

许可证

MIT许可证（MIT）。请查看许可证文件获取更多信息。

tanthammar / livewire-window-size

维护者

详细信息