README

Squeezer 是 Laravel 模板引擎 Blade 的扩展。它添加了诸如 @embed、@class 和 @style 等强大的功能。

使用 composer 安装

在你的终端应用程序中，只需运行

composer require ardentic/squeezer

将 Squeezer 添加到 Laravel

在 config/app.php 中添加以下内容

'providers' => [
  Ardentic\Squeezer\SqueezerServiceProvider::class
]

'aliases' => [
  'Squeezer' => Ardentic\Squeezer\SqueezerFacade::class
]

示例

一些使用 Squeezer 可以实现的基本示例。

@style

@style 允许你从命名数组生成一个字符串形式的样式属性。

示例

<?php
  $styles = [
    'top' => '0',
    'left' => '0',
    'background-color' => '#ccc'
  ];
?>

<div @style($styles)></div>

这将生成以下结果

<div style="top: 0; left: 0; background-color: #ccc;"></div>

@class

@class 允许你从命名数组生成一个字符串形式的类列表。

示例

<?php
  $classes = [
    'button',
    'button--wide'
    'is-active' => true,
    'is-disabled' => false
  ];
?>

<div @class($classes)></div>

这将生成以下结果

<div class="button button--wide is-active"></div>

@embed

@embed 允许你在其他视图组件内部嵌入视图组件，就像 Blade 中的 @extends 一样工作。虽然 @section 和 @extends 不能嵌套，但 @embed 可以。

@embed 还允许你传递局部变量并将视图组合器连接到你嵌入的组件。

@embed 的基本概念

wrapper.blade.php

<div class="wrapper">
  @block('content')
</div>

component.blade.php

@embed('wrapper')
  @block('content')
    <div class="component"></div>
  @endblock
@endembed

这将生成以下结果

<div class="wrapper">
  <div class="component"></div>
</div>

使用 @embed 传递局部变量

wrapper.blade.php

<div class="wrapper" data-layout="{{ $layout }}">
  @block('content')
</div>

component.blade.php

@embed('wrapper', ['layout' => 'slim'])
  @block('content')
    <div class="component"></div>
  @endblock
@endembed

这将生成以下结果

<div class="wrapper" data-layout="slim">
  <div class="component"></div>
</div>

使用视图组合器与 @embed

AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
  public function boot()
  {
    view()->composer('wrapper', function($view) {
      $view->with('layout', 'slim');
    });
  }

  public function register()
  {
    //
  }
}

wrapper.blade.php

<div class="wrapper" data-layout="{{ $layout }}">
  @block('content')
</div>

component.blade.php

@embed('wrapper')
  @block('content')
    <div class="component"></div>
  @endblock
@endembed

这将生成以下结果

<div class="wrapper" data-layout="slim">
  <div class="component"></div>
</div>