README

一套适用于 Laravel Blade 组件的 Bulma 前端框架。为 Laravel 8.x 和 Bulma 0.9.x 构建。

此包还包含用于与 Laravel Fortify 一起使用的认证视图。

内容

入门
- Alpine js
发布视图
组件
- 输入
  - 选项
  - 只读
  - 占位符
  - 附加类
- 卡片
- 媒体
- 消息
- 通知
- 标签页
- 模态框
视图
- 分页
- 简单分页
认证视图
测试

入门

composer require chrisrhymes/bulma-blade-ui

该包应在 Laravel 8 中自动发现。

Alpine JS

某些组件具有一些交互性，例如通知被关闭。此包中的组件已预先配置为使用 Alpine JS，因为它是一个小且易于使用的 JavaScript 包。

因此，为了使用此交互性，您需要在您的 Laravel 应用程序中包含 Alpine JS。

发布视图和配置

如果您想使用包中的认证视图，则需要发布配置，以便您可以覆盖默认配置。

php artisan vendor:publish --tag=config --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider

如果您想发布视图，可以使用以下命令。如果您自定义了组件，这可能会在以后更新时导致困难。

php artisan vendor:publish --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider

组件

该包提供以下组件

卡片
复选框
错误
水平输入
水平多选框
水平单选按钮
水平选择
水平文本区域
输入
媒体
消息
模态框
模态框卡片
多选框
通知
单选按钮
选择
提交
标签页
文本区域

组件位于 bbui 命名空间中。

<x-bbui::input label="Username" name="usermane" value="myusername"></x-bbui::input>

输入

有标准（标签在输入上方）和水平输入（标签在输入左侧）可用。
所有输入都需要标签、名称和值（提交除外）。
您可以在输入上设置 :required="true" 以添加必填标签。
将提交上的类型设置为覆盖默认的 'is-primary' 按钮类。

选项

选择、单选按钮和多选框需要选项数组 :options="['value' => 'label', 'value2' => 'label2']"

<!-- Select input, passing in the options -->
<x-bbui::select 
    label="Select a Tree" 
    name="tree" 
    :options="['oak' => 'Oak', 'ash' => 'Ash', 'maple' => 'Maple']"
></x-bbui::select>

<!-- Alternatively use a variable to pass in the options -->
@php($trees = ['oak' => 'Oak', 'ash' => 'Ash', 'maple' => 'Maple'])

<x-bbui::select 
    label="Select a Tree" 
    name="tree" 
    :options="$trees"
></x-bbui::select>

只读

以下输入组件可以通过设置 :readonly="true" 来设置为只读

水平输入
水平文本区域
输入
文本区域

占位符

以下输入组件可以通过设置 placeholder="The placeholder text" 来设置占位符

水平输入
水平选择
水平文本区域
输入
选择
文本区域

附加类

Bulma 允许您为 input、textarea 和 select 设置颜色、大小和状态。您可以通过传递额外的类来将其添加到组件中。

<x-bbui::input label="Username" name="usermane" value="myusername" class="is-primary is-large is-rounded is-loading"></x-bbui::input>

这适用于以下输入组件

水平输入
水平选择
水平文本区域
输入
选择
文本区域

Livewire 输入（实验性）

要使用 Livewire 的输入，请将 wire:model="modelName" 设置为具有相关模型名称的属性。如果使用 wire:model，则无需设置 value=""。

<x-bbui::input label="Username" name="usermane" value="myusername" wire:model="modelName"></x-bbui::input>

您还可以将 defer、lazy 或 debounce 添加到以下输入中

水平输入
水平文本区域
输入
文本区域

<x-bbui::input label="Username" name="usermane" value="myusername" wire:model.debounce.500ms="modelName"></x-bbui::input>

卡片

卡片允许有标题或图片的卡片。卡片还允许使用命名槽来使用页脚。

<!-- Card with title -->
<x-bbui::card title="The card title">
    Card content goes here
</x-bbui::card>

<!-- Card with image -->
<x-bbui::card image="/path/to/image.png" alt="The image alt text">
    Card content goes here
</x-bbui::card>

<!-- Card with footer -->
<x-bbui::card title="The card title">
    Card content goes here
    
    <x-slot name="footer">
        <a href="#" class="card-footer-item">Footer item</a> 
    </x-slot>
</x-bbui::card>

媒体

媒体接受一个图像作为媒体左，内容，以及一个可选的媒体右，使用命名槽。

<!-- Media -->
<x-bbui::media image="/path/to/image.png" alt="Image alt text">
    The media content
</x-bbui::media>

<!-- Media with media-right -->
<x-bbui::media image="/path/to/image.png" alt="Image alt text">
    The media content

    <x-slot name="right">
        <button class="delete"></button>
    </x-slot>
</x-bbui::media>

消息

消息允许您从默认的 'is-info' 覆盖类型。要取消消息，需要 Alpine.js。

从 v0.1.3 版本开始，标题是可选的。如果没有提供标题，则不会显示消息头。

<!-- Message -->
<x-bbui::message title="The message title">
    The message content
</x-bbui::message>

<!-- Message is-danger -->
<x-bbui::message type="is-danger" title="The message title">
    The message content
</x-bbui::message>

<!-- Message title is optional -->
<x-bbui::message>
    The message content
</x-bbui::message>

通知

通知允许您从默认的 'is-info' 覆盖类型。要取消通知，需要 Alpine.js。

<!-- Notification -->
<x-bbui::notification>
    The notification content
</x-bbui::notification>

<!-- Notification is-danger -->
<x-bbui::notification type="is-danger">
    The notification content
</x-bbui::notification>

标签页

传递一个包含每个项目的项的数组，为每个项设置 'key' => 'value'，其中值将用作标签页标签。
为每个项目创建一个 x-slot，设置槽名为项目数组的 'key'。将标签页内容放在槽内。
您可以通过设置 type 来覆盖标签的类型。
您可以通过设置 default 来覆盖默认显示的标签页。

标签组件使用 Alpine.js 来显示和隐藏标签页内容。

<!-- Tabs -->
<x-bbui::tabs :items="['first' => 'The First Tab', 'second' => 'The Second Tab']">
    <x-slot name="first">
        The first tab content
    </x-slot>
    
    <x-slot name="second">
        The second tab content
    </x-slot>
</x-bbui::tabs>

<!-- Tabs overriding the type -->
<x-bbui::tabs :items="['first' => 'The First Tab', 'second' => 'The Second Tab']" type="is-boxed is-small">
    <x-slot name="first">
        The first tab content
    </x-slot>
    
    <x-slot name="second">
        The second tab content
    </x-slot>
</x-bbui::tabs>

<!-- Tabs overriding the default tab displayed -->
<x-bbui::tabs :items="['first' => 'The First Tab', 'second' => 'The Second Tab']" default="second">
    <x-slot name="first">
        The first tab content
    </x-slot>
    
    <x-slot name="second">
        The second tab content
    </x-slot>
</x-bbui::tabs>

模态框

存在模态和模态卡片组件。两者都需要 Alpine.js。

两者都需要一个 <x-slot name="trigger"> 来定义触发模态的按钮内容。
模态组件将显示使用默认 $slot 提供的内容。
您可以通过设置类型来覆盖触发按钮的类。默认情况下，它使用 is-primary。
模态卡片需要 title。
模态卡片有一个页脚槽，其中包含一个取消按钮以关闭模态。您可以通过设置 cancel="Cancel" 属性来覆盖取消文本。
如果您在页脚添加了另一个也关闭模态的按钮，请确保您将该按钮添加 @click="active = false"。

<!-- Modal -->
<x-bbui::modal type="is-info">
    <x-slot name="trigger">
        <span class="icon"><i class="fas fa-eye"></i></span>
        <span>Open Modal</span>
    </x-slot>
    
    <!-- The modal content -->
    <div class="box">
        <p>Modal content</p>
    </div>
</x-bbui::modal>

<!-- Modal with image content -->
<x-bbui::modal>
    <x-slot name="trigger">
        <span class="icon"><i class="fas fa-eye"></i></span>
        <span>Open Modal</span>
    </x-slot>

    <!-- The modal content -->
    <figure class="image is-4by3">
        <img src="https://bulma.org.cn/images/placeholders/1280x960.png" alt="">
    </figure>
</x-bbui::modal>

<!-- Modal Card -->
<x-bbui::modal-card type="is-danger" title="Are you sure?">
    <x-slot name="trigger">
        <span class="icon"><i class="fas fa-times"></i></span>
        <span>Delete</span>
    </x-slot>

    <!-- The modal content -->
    <p>Are you sure you want to delete this?</p>

    <x-slot name="footer">
        <button class="button" @click="active = false">
            <span class="icon"><i class="fas fa-check"></i></span>
            <span>Confirm</span>
        </button>
    </x-slot>
</x-bbui::modal-card>

视图

分页

分页视图提供下一页、上一页和页码的分页列表。页码位于下一页和上一页按钮之间。

您可以通过在 ->links() 方法中设置视图来为包使用分页视图，如下所示，或使用 Laravel 文档中描述的其他方法。

@php($users = User::paginate())

{{ $users->links('bbui::pagination') }}

对于 Livewire 分页，请使用 bbui::livewire.pagination 视图。这将以相关的 wire:click 设置替换 href。

简单分页

您可以通过在 ->links() 方法中设置视图来为包使用简单的分页视图，如下所示，或使用 Laravel 文档中描述的其他方法。

@php($users = User::paginate())

{{ $users->links('bbui::simple-pagination') }}

对于 Livewire 简单分页，请使用 bbui::livewire.simple-pagination 视图。这将以相关的 wire:click 设置替换 href。

认证视图

如果您使用 Laravel Fortify 并且想使用包的认证视图，请在您的 App\Providers\FortifyServiceProvider 的 boot() 方法中设置以下内容

Fortify::loginView(fn () => view('bbui::auth.login'));
Fortify::registerView(fn () => view('bbui::auth.register'));
Fortify::requestPasswordResetLinkView(function () {
    return view('bbui::auth.forgot-password');
});
Fortify::resetPasswordView(function ($request) {
    return view('bbui::auth.reset-password', ['request' => $request]);
});

然后，通过更新 bulma-blade-ui.php 配置文件中的 'auth_extends' => 'bbui::default-layout' 来设置您希望扩展的视图组件。

测试

该包对组件进行了基本的测试。要运行测试

composer test

chrisrhymes / bulma-blade-ui

维护者

详细信息