README

##BladeComponents - 为Laravel 5.1创建非耦合组件的Pacote，使用Blade指令

该包允许以简单的方式创建具有各种功能的组件，以便轻松使用和重用。通过Artisan的新功能，只需一个命令就可以生成新组件的所有功能结构，并将所有文件（PHP、CSS、HTML和JavaScript）组织地分离。

##安装该组件必须通过Composer在应用的标准目录内安装（必需），使用以下命令：

composer require moura/bladecomponents

##配置安装后，需要执行一些配置才能让BladeComponents正常运行，并确保Blade正确渲染组件。

####配置service provider BladeComponents的provider需要添加到config/app.php文件中的providers数组。

Moura\BladeComponents\BladeComponentsProvider::class

如果provider没有正确添加到Laravel的providers数组中，则通过BladeComponents创建的任何组件都不会工作。

####生成配置文件 BladeComponents需要配置文件。首先，需要在config/bladecomponents.php中创建此配置文件。执行以下命令：

php artisan vendor:publish

此命令将为您创建配置文件。您可以修改此文件以定义自己的配置。

请确保检查该包的配置文件在版本发布之间的更改。

##使用BladeComponents BladeComponents的使用非常简单。要创建新组件，请执行以下命令：

php artisan make:bladecomponent Name

此命令将使BladeComponents生成新组件所需的所有结构。默认情况下，组件将使用传递的名称加上单词componente创建。以下目录结构将在您的应用中创建：

<app>\
	<BladeComponentes>\
		<Components>\
			NameComponent.php
		<Scripts>\
			<css>\
				NameComponent.css
			<js>\
				NameComponent.js
		<Views>\
			NameComponent.blade.php

组件创建后，需要将其注册到config/bladecomponents.php文件中的组件配置数组。编辑config/bladecomponents.php文件并注册新组件后，它即可用于实现。

可以生成不带CSS和JS文件的组件。只需在BladeComponents命令中指定--plain参数即可。

php artisan make:bladecomponent Name --plain

##组件实现应根据应用需求修改生成的文件。

BladeComponents允许在所有文件中使用Blade指令。例如，可以在JS和CSS文件中使用控制指令和循环指令。

###BladeComponent类通过BladeComponents创建的所有组件（例如app/BladeComponents/Components/NameComponent.php）都继承自一个抽象类。组件的标准类结构如下：

class NameComponent extends BladeComponent{
  function inputs()
  {
    return [
    
    ];
  }
  
  function buttons()
  {
    return [
    
    ];
  }
  
  function data()
  {
    return [
    
    ];
  }
}

这个继承的抽象类是BladeComponent，它实现了3个抽象方法。它们是：

inputs()

asbtract function inputs();

此函数返回一个关联数组，包含所有用于视图、CSS和JS文件的HTML inputs、labels、selects、radio buttons、checkboxes和textareas的代码，通过inputs数组传递$inputs['identifier']。

示例：使用标签和文本输入框实现抽象函数 inputs()

function inputs()
{
  return [
    'foolabel' => Form::label(
        'fooSelect',
        'Text for label',
        [
            'class' => 'foo-class'
        ]
    ),
    'fooSelect' => Form::select(
        'fooSelect',
        [' '],
        null,
        [
            'multiple' => null,
            'class'    => 'foo-class'
        ]
    )
  ];
}

强烈建议使用Form外观生成所有输入的HTML，以遵循Laravel的标准，确保组件正确运行

buttons()

asbtract function buttons();

该函数返回一个关联数组，包含所有将用于视图、CSS和JS文件的按钮的HTML代码，通过按钮数组$buttons['identificador']

示例：使用提交按钮和重置按钮实现抽象函数 buttons()

function buttons()
{
  return [
    'submitButton' => Form::submit('Click Me!'),
    'resetButton' => Form::reset('Clear form')
  ];
}

强烈建议使用Form外观生成所有按钮的HTML，以遵循Laravel的标准，确保组件正确运行

data()

asbtract function data();

该函数返回一个关联数组，包含可用来构建输入和按钮的数据对象，通过$this->getData('identificador')或通过视图、CSS和JS文件的数据数组$data['identificador']

示例：使用任何数据对象实现抽象函数 data()

function data()
{
  return [
    'fooObject' => app(FooNameSpace\FooClass)
  ];
}

### 组件的CSS样式

app/BladeComponents/Scripts/css/ComponentName.css

使用此文件创建您组件的专用样式。

在CSS文件中使用Blade指令

BladeComponents允许开发者在组件的默认样式文件中使用Blade指令。以下是一个包含Blade指令的CSS文件示例

.componentName-class div{
  @if(array_key_exists('fooLabel',$inputs))
    border-color : red;
  @else
    border-color : blue;
  @endif;
}

可以使用所有输入、按钮和数据对象。所有Blade指令都可用于创建一个动态的CSS文件。

### 组件的控制脚本

当通过BladeComponents创建组件而没有传递--plain参数时，默认会为新的组件创建一个JS文件。

app/BladeComponents/Scripts/js/ComponentName.js

使用此文件创建您组件的所有控制脚本。

在JS文件中使用Blade指令

BladeComponents允许开发者在组件的控制脚本文件中使用Blade指令。以下是一个使用jQuery框架的包含Blade指令的JS文件示例

$(document).ready(function() {
  @if(array_key_exists('fooLabel',$inputs))
    console.log("ready!");
  @else
    console.log("Not ready!");
  @endif;
});

可以使用所有定义的输入、按钮和数据对象。所有Blade指令都可用于创建一个动态的JS文件。

在应用中使用组件

所有创建并注册在BladeComponents配置文件中的组件都会被转换为Blade指令，其使用非常简单。在任意视图文件中，请执行以下操作

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  @NameComponent('Name');
</body>
</html>

在调用组件时，可以将一个包含变量的数组作为第二个参数传递，这些变量将在组件的默认视图中使用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  @NameComponent('Name',['foo' => 'bar','other' => ObjectClass]);
</body>
</html>

moura / bladecomponents

维护者

详细信息