README

Laravel 组件库

Bootstrap 4（和 5）预制的 Blade 组件集合。

安装与设置

您可以通过 composer 安装此包

composer require tomsix/laravel-components-library

该包将自动注册其服务提供者。

使用

表单组件使用

使用 Laravel 7 的常规 Blade 组件语法。表单组件可以使用 form 前缀。

<x-form::input name="title" />

以下属性是特殊的

• name（必需）
• id（当未提供时，将使用 name）
• label（当为 null 时不显示）
• value（使用 old() 辅助函数）

所有其他属性将合并到输入 html 标签上

前置 & 后置

输入、选择和文本区域组件在具有 Bootstrap input-group 类的额外 div 中渲染。有了这个额外功能，可以添加前置和后置内容。

<x-form::input name="username" label="Username" prepend="@" />

从 v2 版本开始，可以使用插槽覆盖默认的前置或后置。

<div class="mb-3">
    <x-form::input type="file" name="photos" label="Foto" multiple>
        <x-slot name="append">
            <span class="input-group-append">
                <button class="btn btn-secondary" type="button">Demo</button>
            </span>
        </x-slot>
    </x-form::input>
</div>

前置 & 后置

每个表单组件包含两个额外插槽：前置和后置。

<div class="mb-3">
    <x-form::input name="email" id="email" class="form-control-lg" placeholder="email....">
        <x-slot name="before">
            <label for="email">Custom label</label>
        </x-slot>
        <x-slot name="after">
            <div class="form-text">We'll never share your email with anyone else.</div>
        </x-slot>
    </x-form::input>
</div>

表单组件

表单

从 V2 版本开始，有一个表单组件 x-form::form。这将添加 CSRF-token 并使用 @method 指令进行 PUT 和 DELETE。默认方法为 POST 而不是 GET。

<x-form::form method="PUT" :action="route('user.store')">
    <!-- The form content -->
</x-form:::form>

输入

<x-form::input name="first-name" label="First Name" placeholder="Enter your first name" type="text" />

文本区域

<x-form::textarea name="description" label="Description" placeholder="Typ here ..." />

选择

<x-form::select name="animal" :options="[1 => 'cat', 2 => 'dog', 4 => 'cow']" label="Favorite animal" />

可以通过插槽添加额外的选项或默认选项。

<x-form::select name="animal" :options="[1 => 'cat', 2 => 'dog', 4 => 'cow']" label="Favorite animal">
    <option value="">Choose an animal</option>
</x-form::select>

模型选择

使用 model-select 组件，您可以使用 Eloquent 模型集合。models 属性接受集合。也可以使用 Eloquent 模型作为选中的值

<x-form::model-select name="user" :models="$users" label="Your friend" key-attribute="id" value-attribute="full_name">
    <option value="">Select your friend</option>
</x-form::model-select>

默认情况下，id 和 name 用于选项值和文本。这可以通过 key-attribute 和 value-attribute 来更改。默认名称可以在配置文件中更改。

复选框、单选按钮和开关

一组复选框使用复选框组件。可以提供选项数组或在使用插槽时使用单个复选框组件。

<x-form::checkbox name="terms" value="yes" label="Agree to terms and conditions" />

数组

<x-form::checkboxes name="actors[]" label="Favorite actors" :options="$options" type="checkbox" />

复选框需要一个包含选项的数组。数组键用于复选框值属性，数组值用作标签文本。没有键的数组将使用从 0 开始的数字作为普通数组。

带键的数组

数组

$options = ['lieven' => 'Lieven Scheire', 'jelle' => 'Jelle De Beule', 'jonas' => 'Jonas Geinaart']; 

结果

<input class="form-check-input" type="checkbox" name="actors[]" id="actors-lieven" value="lieven" />

不带键的数组

数组

$options = ['Lieven Scheire', 'Jelle De Beule', 'Jonas Geinaart']; 

结果

<input class="form-check-input " type="checkbox" name="actors[]" id="actors-0" value="1">

内联

inline 属性启用了 Bootstrap 内联类。

类型

将 type 属性更改为 radio 将用于单选按钮。最新的 Bootstrap 4 版本也有开关，可以使用 switch 类型。

错误

表单错误有两种渲染方式。默认情况下，它们在组件中显示。这可以在配置文件中禁用。

也可以在视图中添加错误包。

<x-form::errors title="There are some incorrect fields" color="warning"/>

Bootstrap 5

更多信息即将推出

导航组件

这些组件的目的是在导航栏中使用

    <nav class="navbar navbar-light bg-light">
        <ul class="navbar-nav mr-auto">
            <x-navigation-item :href="route('home')" >
                <x-navigation-label text="Home" icon="fas fa-globe" />
            </x-navigation-item>
        </ul>
    </nav>

导航项

URL 必须包含在组件中。将自动添加 'active' 类。

<x-navigation::item :href="route('home')" >
    <p>About</p>
</x-navigation::item>

导航标签

标签组件提供文本或图标。这两个属性都是可选的。

<x-navigation::label text="Home" icon="fas fa-globe" />

自定义

配置

你可以选择使用以下方式发布配置文件：

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=config

组件中元素的CSS类可以在配置文件中更改。默认情况下，所有组件都使用Bootstrap 4类。

组件

你也可以选择发布组件并进行编辑。它们将被复制到resources/views/vendor/laravel-components-library。

表单组件

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=form-components

导航组件

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=navigation-components

所有组件

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=components

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。