README

WordPress 兼容的 blade 组件库。

已知问题

有任何问题？这个列表是您的首选。

• 组件在创建后不久就无法显示。 这是因为组件别名被缓存了。为了显示组件，请刷新 blade 缓存。如果您遇到此问题，您可能可以通过直接引用 @component.component 而不是 @component 来使用组件名称。

示例用法

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

渲染组件

@icon(['icon' => 'apps', 'size' => 'md'])
@endicon

数据流

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

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

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

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

示例

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

过滤器

当在 WordPress 中使用组件库时，启用了过滤器以允许从 WordPress 过滤。每个组件都有多个过滤器。

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

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

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

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

每个数据属性都有一个相应的过滤器，例如 ComponentLibrary/Component/ComponentName/dataVar

附加路径（WordPress 特定）

您可以使用 ComponentLibrary/ViewPaths 过滤器要求组件库渲染更多视图路径。只需按照以下操作向组件库添加另一个路径

add_filter('ComponentLibrary/ViewPaths', function($viewPaths) (
  if(is_array($viewPaths)) {
    $viewPaths = [];
  }
  $viewPaths[] = "/path/to/plugin/views";
  return $viewPaths; 
));

Iframe

ComponentLibrary/Component/Iframe/GetSuppliers

修改 iframe 的预定义供应商（来源）列表

• @param array $suppliers - 包含供应商作为供应商对象的数组

apply_filters('ComponentLibrary/Component/Iframe/GetSuppliers', $suppliers );

add_filter('ComponentLibrary/Component/Iframe/GetSuppliers', function($suppliers) {
return $suppliers;
}, 10, 1 );

图标

ComponentLibrary/Component/Icon/AltTextPrefix

修改描述图标时使用的前缀。

• @param string $altTextPrefix - 包含 alt 文本前缀的字符串。

add_filter('ComponentLibrary/Component/Icon/AltTextPrefix', function($altTextPrefix) {
  return $altTextPrefix;
}, 10, 1 );

ComponentLibrary/Component/Icon/AltText

修改描述图标时使用的数组。

• @param array $altText - 包含图标键和描述值的数组。

add_filter('ComponentLibrary/Component/Icon/AltText', function($altText) {
  return $altText;
}, 10, 1 );

ComponentLibrary/Component/Icon/AltTextUndefined

修改描述图标时使用的未定义消息。

• @param string $altTextUndefined - 包含 alt 文本未定义消息的字符串。

add_filter('ComponentLibrary/Component/Icon/AltTextUndefined', function($altTextUndefined) {
  return $altTextUndefined;
}, 10, 1 );

添加内置组件

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

• 视图（name.blade.php）
• 控制器（Name.php）
• 配置（name.json）

视图

视图应尽可能简单，在大多数情况下只需几个if语句。对于更高级的解决方案，请考虑根据原子设计原则使用组件作为较大组件的子组件。

示例

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

控制器

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

示例

namespace BladeComponentLibrary\Component\Foo;

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

配置

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

示例

{
    "slug":"foo",
    "default":{
       "foo":true,
    },
    "description":{
       "foo": "Is it foo?",
    },
    "view":"foo.blade.php"
 }