README

BladeStyler是一个Laravel扩展，旨在帮助在UI组件之间保持一致的样式，特别适合Tailwind等Utility-First CSS框架。

安装与设置

BladeStyler使用Composer进行安装。要在Laravel项目目录中安装BladeStyler，请运行以下命令

composer require williams/bladestyler

接下来，通过将BladeStyler::initialize($views)添加到项目AppServiceProvider.php文件的boot()方法中，指定哪些视图应该启用BladeStyler。

<?php
use Williams\BladeStyler\BladeStyler;

class AppServiceProvider(){
    public function boot(){
        BladeStyler::initialize(['partials.alert']); //Array of views with BladeStyler enabled
    }
}

用法

定义样式

BladeStyler引入了@setStyles指令，允许您为UI组件创建可重用的类别名。

// styles.blade.php

@setStyles([
    'alert' => 'p-2 border',
    'success' => 'text-green-800 border-green-800 bg-green-200',
    'error' => 'text-red-800 border-red-800 bg-red-200'
])

使用样式

您可以使用@applyStyles指令在组件内应用这些样式。

// partials/alert.blade.php

@include('styles')
<div @applyStyles('alert success')>Alert Message</div>

// Will be rendered as:
<div class="p-2 border text-green-800 border-green-800 bg-green-200">Alert Message</div>

如果您希望自行处理class=""属性，可以使用@style指令。

<div class="@style('alert success')">Alert Message</div>

或者，为了在PHP标签的上下文中获取样式

@php
$styles = $_style('alert'); // 'p-2 border'
@endphp

条件样式

BladeStyler支持条件样式，类似于Laravel的@class指令。

<div @applyStyles(
    'alert',
    'success' => ($alertType == 'success'), 
    'error' => ($alertType == 'error'))>Alert Message</div>

类直接传递

如果使用@setStyles指令未注册类，它将直接传递到生成的HTML中。

<div @applyStyles('alert mb-2')>Alert Message</div>

// Will be rendered as:
<div class="p-2 border mb-2">Alert Message</div>

BladeStyler的优势

虽然Utility-First框架（如Tailwind CSS）通常建议不要创建抽象层，但在某些情况下，这种做法是必要的。BladeStyler提供了一种抽象层，具有关键优势，可以解决常见问题。

• 清晰的HTML输出：生成的HTML保留了底层实用类，这使得可以简单地看到应用了哪些样式属性。

• 简化UI开发：无需管理外部CSS文件——BladeStyler直接在Blade模板中简化了这一过程。

• 组件级样式：样式可以限定于单个组件，而不是全局应用，提供更大的灵活性和控制。