README

此包添加了一些功能，以便更容易地在 Laravel Blade 中使用组件和 HTML 标签。

<AppLayout>
    <Slot title>BladeX</Slot>
    
    <MyButton type="primary">Click here</MyButton>
</AppLayout>

BladeX v2
- 要求
- 安装
- 编译
- 组件
  - 命名规则
  - 组件路径
- 调用组件
- 插槽
- 使用组件
- 像组件一样使用视图
- 使用全部 (*)
- 布局
- 指令助手
  - 布局
  - 部分
- 当前目录名称
- 配置
- 支持

要求

PHP 8.1 或更高版本
Laravel 10.0 或 11.0

安装

使用 composer 安装此包

composer require rapid/bladex

然后清除编译后的视图缓存以重新编译 blade 文件

php artisan view:clear

编译

BladeX 在编译时将组件标签转换为正确的 PHP 代码！一些操作不是在运行时执行的。

这意味着如果您更改了不会重新编译源文件但会影响代码的内容，则必须清除编译缓存以重新编译

php artisan view:clear

组件

您可以在任何地方通过 <HtmlTag> 调用组件！

命名规则

组件调用名称应该是 PascalCase，但文件名应该是 kebab-case。

组件路径

每个名为 components 的文件夹都是一个组件路径。

示例

调用组件

只需键入 <TagName>

<Button class="bg-red-500">Delete</Button>
<Button.Red>Cancel</Button.Red>
<Posts.PostCard :post="$post" />

注意：如果在编译时找不到组件文件，则组件将无法编译。

插槽

在 blade 中，您必须写入 <x-slot name="slot_name"> 来定义插槽值。

但在 BladeX 中，只需键入 <Slot slot_name>

<Dropdown>
    Select Option
    
    <Slot options>
        <li>Option 1</li>
        <li>Option 2</li>
    </Slot>
    
    <Slot icon>
        <svg>...</svg>
    </Slot>
</Dropdown>

使用组件

如果您想通过别名（类似于编程使用关键字）调用组件，可以使用魔法 blade 指令 @use

@use(Posts.Actions.Del)

<Del :post="$post" />

使用 as 关键字设置别名

@use(Posts.Actions.Del as PostDelete)

<PostDelete :post="$post" />

您还可以使用组件文件夹

@use(Posts.Actions as PostAct)

<PostAct.Del :post="$post" />

像组件一样使用视图

如果您想通过指定视图路径使用它，可以使用此语法

@use('home.post' as Post)

<Post />

<!-- Automatically convert 'app-layout' to 'AppLayout' as alias! -->
@use('layout.app-layout')

<AppLayout />

使用全部 (*)

如果您想在同一目录/名称中使用所有组件，可以编写带有 .* 后缀的 @use 指令

@use(Posts.Actions.*)

<!-- Calls <Posts.Actions.Del> if exists -->
<Del :post="$post" />
<!-- Calls <Posts.Actions.Create> if exists -->
<Create :post="$post" />

@use('layouts.*')

<!-- Calls 'layouts.app-layout.blade.php' if exists -->
<AppLayout>
    Hello World
</AppLayout>

注意：尽量不要滥用此功能。

因为此功能在文件中搜索，会减慢编译视图的速度

但是，所有查找都是在编译时执行的。所以不用担心网站的速度：）

布局

您可以使用 BladeX 创建布局。例如

layouts/app.blade.php

<html lang="en">
<head>
    <title>{{ $title }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

index.blade.php

@use('layouts.app' as AppLayout)

<AppLayout>
    <Slot title>BladeX</Slot>
    
    Welcome to BladeX!
</AppLayout>

如果您创建 .blade.php 配置文件，则不再需要 @use 标签！更多信息

指令助手

布局

布局等于 @extends，但它只为视图名称添加 layouts. 名称。例如 @layout('guest') 转换为 @extends('layouts.guest')，而 @layout('admin.main') 则转换为 @extends('admin.layouts.main')

@layout('guest')

@section('content')
    <h1>Hello World</h1>
@endsection

您还可以为布局使用组件。

部分

部分等于 @include，但它只为视图名称添加 partials. 名称。例如 @partial('edit') 转换为 @include('partials.edit')，而 @partial('admin.delete') 则转换为 @include('admin.partials.delete')

<AppLayout>
    @partial('users.my-info')
</AppLayout>

当前目录名称

您可以在 @include、@use、@layout、@extends、@partial 中使用 @ 来使用当前路径引用。

admin/dashboard.blade.php

@use('admin.btn-create')
@use('@btn-create')

@include('admin.partials.create-user')
@include('@partials.create-user')
@partial('@create-user')

配置

将 .blade.php 文件添加到您想要应用子文件的地方

<?php

# Note: After editing this source, run `php artisan view:clear` one time.

return [
    # Use components alias
    'use' => [
        // Example:
        // 1- 'Posts.PostCard'
        // 2- 'posts.post-card'
        // 3- 'Buttons.Red' => 'Alias',
        // 4- 'Buttons.*'
        
    ],
];

例如，创建文件 resources/views/.blade.php 并包含以下内容

<?php

# Note: After editing this source, run `php artisan view:clear` one time.

return [
    # Use components alias
    'use' => [
        // Example:
        // 1- 'Posts.PostCard'
        // 2- 'posts.post-card'
        // 3- 'Buttons.Red' => 'Alias',
        // 4- 'Buttons.*'
        
        'layouts.app' => 'AppLayout',
        'layouts.guest' => 'GuestLayout',
    ],
];

现在，您可以在 resources/views 中的任何blade文件中使用带有组件的布局。

<AppLayout>
    <p>Content</p>
</AppLayout>

支持

Telegram: @Mahdi_Saremi
Instagram: @mahdi_saremi_org

rapid / bladex

维护者

详情