README

这是一个包含加载函数和视图库及其控制器的库。它使得在多个产品中快速准确地开发静态用户界面成为可能。该包旨在独立使用或与 WordPress 作为 CMS 引擎一起使用。

重要提示：这是一个视图包！不会添加任何 CSS 或 JavaScript 代码。我们将（将，尚未完成）有一个单独的包以样式指南格式提供这些功能。

入门

推荐使用 composer。添加以下要求以启用一系列新功能。

composer reqire helsingborg-stad/blade-component-library

已知问题

• 组件/指令必须使用 @endcomponent 标签调用。不带结束标签的指令将不起作用。

示例用法（注册组件）

<?php

namespace Municipio\Theme;

class RegisterUtility
{
    public function __construct()
    {
        \BladeComponentLibrary\Register::addViewPath(
            MUNICIPIO_PATH . 'views/utility',
            true //true = prepend, false = append, default = prepend
        ); 

        \BladeComponentLibrary\Register::addControllerPath(
            MUNICIPIO_PATH . 'library/Controller/Utility/',
            true //true = prepend, false = append, default = prepend
        );

        \BladeComponentLibrary\Register::add(
            'button',
            [
                'isPrimary' => true,
                'isDisabled' => false, 
                'isOutlined' => true,

                'label' => "Button text",
                'href' => "https://google.se",

                'target' => "_self"
            ],
            'button.blade.php' // You can leave this out, it will automatically be generated from slug. 
        );

        \BladeComponentLibrary\Register::add(
            'date',
            [
                'hasTime' => false,
                'hasDate' => true, 
                'isHumanReadable' => true
            ],
            'date-time.blade.php' 
        );
    }
}

示例用法（渲染组件）

注册的组件可以像在 Laravel 中一样作为组件或指令使用。它们增加了在渲染前加载控制器的功能，以确保内容格式化和定义。

作为指令渲染

@button(['text' => "Button text", 'href' => "https://helsingborg.se"]); 

作为组件渲染

@component('button')
    
    Button text

    @slot('href')
        https://helsingborg.se
    @endslot

@endcomponent

实现替换视图和控制器

该包旨在用主题或插件自己的视图覆盖。只需添加以下新路径。您有 prepend 或 append 现有搜索数组的选项。路径将按顺序搜索。

use BladeComponentLibrary/Register as Register;

//Adds a new view search path
Register::addViewPath(
    MUNICIPIO_PATH . 'views/utility',
    false //Prepend = true
); 

//Adds a new controller search path
Register::addControllerPath(
    MUNICIPIO_PATH . 'library/Controller/Utility/',
    false //Prepend = true
);

数据流

基础控制器组件 此控制器处理所有组件的数据流。有多种方式向组件输入数据。

1. 组件的默认配置。这些设置在每个组件文件夹中的配置 json 中进行。控制器中使用的所有变量都应在此处声明。这是为了避免未声明的变量警告。

2. 通过填充指令（在视图文件中）。这应该是指示状态的数据，如 isDisabled => true 等。这是用户定制的主体位置。

3. 通过连接到每个组件的控制器中的数据操作。这些数据可以以任何形式存在，但应侧重于将其他输入转换为视图数据。此文件可以包含纯文本类。

示例

if($isDisabled) { 
    $this->classList[] = 'disabled'; 
}

1. 如果组件库在 WordPress 内运行，则有一个额外的过滤器可用于在外部操纵数据，作为输出前的最后一步。

过滤器（通用）：BladeComponentLibrary/Component/Data - 接收 $data

过滤器（特定组件）：BladeComponentLibrary/Component/ComponentName/Data - 接收 $data

过滤器类（通用）：BladeComponentLibrary/Component/Class - 接收 $class

过滤器类（组件特定）：BladeComponentLibrary/Component/ComponentName/Class - 接收 $class

类过滤器从 $data 对象中提取类变量。

添加内置组件

添加组件最有效和推荐的方式是通过向此包提交一个 PR。这将使所有人都可以使用。一个内部组件需要三个不同的文件。

• 视图
• 控制器
• 配置

视图

视图应尽可能简单，在大多数情况下仅包含几个 if 语句。对于更复杂的解决方案，请考虑使用指令组件作为较大组件的子组件。

示例

<a class="{{ $class }}" target="{{ $target }}" href="{{ $href or '#' }}">{{ $slot or $text }}</a>

控制器

控制器应处理与组件相关的所有逻辑。此文件的主要目的是将任何逻辑从视图中移除。

示例

namespace BladeComponentLibrary\Component\Button;

class Button extends \BladeComponentLibrary\Component\BaseController 
{
    public function init() {
        $this->data['foo'] = "bar"; 
    }
}

配置

组件 slugs 的简单配置（用作指令和组件名称）。默认参数和视图名称（默认为 slug 名称）。配置应以有效的 JSON 格式编写。此文件必须包含“slug”、“default”（默认参数）和“view”键。

示例

{
    "slug":"button",
    "default":{
       "isPrimary":true,
       "isDisabled":false,
       "isOutlined":true,
       "label":"Button text",
       "href":"https:\/\/google.se",
       "target":"_self"
    },
    "view":"button.blade.php"
 }

WordPress 兼容性

如果在此库之前包含 WordPress 核心，则每个组件将分别注册相应的 WordPress 过滤器。我们只需查找名为 apply_filters 的内置函数。过滤器将以其相应文件夹的位置命名。

例如；位于 "./src/Component/Card" 的 Card 组件将在渲染前应用 "BladeComponentLibrary/Component/Card/Data" 过滤器。slug 的最后一部分 "Data" 可以更改为 "Class"，以仅过滤数据对象的 "classes" 子数组。

还会为数据对象中的每个键创建特定的过滤器。例如，如果数据对象包含键 'foo'，则将创建如下过滤器：BladeComponentLibrary/Component/Card/Foo。这不会包含键 "data"，因为它已被上述过滤器保留。

还会为数据对象调用一个通用过滤器，称为 "BladeComponentLibrary/Component/Data"。这有保留数据命名空间的副作用。因此，您不能创建名为 Data 的组件。

视图变量

所有组件视图都将分配一些基本参数。以下列出了这些参数。添加到 $data 数组中的其他一切都将自动添加为以键值命名的 $var。

构建于

• Laravel Blade 5.*

依赖项

• PHP 7.0

版本

https://github.com/helsingborg-stad/blade-component-library/releases

作者

• Sebastian Thulin
• 约翰·西尔弗格伦德
• 扬纳坦·汉森
• 尼古拉斯·拉姆斯特德
• 埃里克·罗森博格
• 亚历山大·博曼·斯库格

许可

本项目遵循MIT许可协议 - 请参阅LICENSE文件以获取详细信息