README

此包包含一组有用的Bootstrap Laravel Blade组件。它促进了DRY原则，并允许您保持HTML的整洁。组件包括警报、徽章、按钮、表单输入（带自动错误反馈）、下拉菜单、导航、分页（响应式）等。组件内置了Laravel Livewire集成，因此您可以使用Livewire或无Livewire来使用它们。

文档

要求
安装
组件
- 警报
- 徽章
- 按钮
- 检查
- 关闭
- 颜色
- 数据列表
- 下拉菜单
- 下拉菜单项
- 图标
- 图片
- 输入
- 链接
- 导航下拉菜单
- 导航链接
- 分页
- 进度条
- 单选按钮
- 选择框
- 文本区域
特质
- WithModel
发布资源
- 自定义视图
- 自定义图标

要求

Bootstrap 5必须首先通过webpack安装
必须安装Font Awesome才能使用图标

安装

使用Composer要求该包

composer require shawe/laravel-bs5-components

组件

手风琴

一个Bootstrap手风琴

<x-bs::accordion id="accordionExample">
    <x-bs::accordion-item id="accordionExample" target="collapseOne" :header="__('Section 1')" active>
        <p>Section 1 content...</p>
    </x-bs::accordion-item>
    <x-bs::accordion-item id="accordionExample" target="collapseTwo" :label="__('Section 2')">
        <p>Section 2 content...</p>
    </x-bs::accordion-item>
</x-bs::accordion>

可用的属性 & 插槽

body: 手风琴主体内容，也可以放置在slot中

手风琴项

一个Bootstrap手风琴项

<x-bs::accordion-item id="accordionExample" target="collapseOne" :header="__('Section 1')" active>
    <p>Section 1 content...</p>
</x-bs::accordion-item>

可用的属性 & 插槽

header: 手风琴头部文本
body: 手风琴主体内容，也可以放置在slot中
active: 将手风琴项设置为活动状态

警报

一个Bootstrap警报

<x-bs::alert :label="__('It was successful!')" color="info" dismissible />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
color: Bootstrap颜色，例如primary、danger、success
dismissible: 将警报设置为可取消

徽章

一个Bootstrap徽章

<x-bs::badge :label="__('Pending')" color="warning" />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
color: Bootstrap颜色，例如primary、danger、success

面包屑

一个Bootstrap面包屑

<x-bs::breadcrumb>
    <li class="breadcrumb-item">
      <x-bs::link :label="__('Home')" route="home" />
    </li>
    <li class="breadcrumb-item">
      <x-bs::link :label="__('Library')" route="library" />
    </li>
    <li class="breadcrumb-item">
      <x-bs::link class="active" :label="__('Data')" />
    </li>
</x-bs::breadcrumb>

按钮

一个Bootstrap按钮

<x-bs::button :label="__('Login')" color="primary" size="lg" route="login" />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
color: Bootstrap颜色，例如primary、danger、success
size: Bootstrap按钮大小，例如sm、lg
type: 按钮类型，例如button、submit
route: 将href设置为路由
url: 将href设置为URL
href: 设置href
dismiss: data-bs-dismiss的值，例如alert、modal
toggle: data-bs-toggle的值，例如collapse、dropdown
click: 点击时的Livewire操作
confirm: 点击时提示用户确认

卡片

一个Bootstrap卡片

<x-bs::card>
    <x-slot name="header">
        <h5>Card Title</h5>
    </x-slot>
    <x-slot name="body">
        <p>Card body content...</p>
    </x-slot>
    <x-slot name="footer">
        <button class="btn btn-primary">Card footer button</button>
    </x-slot>
</x-bs::card>

可用的属性 & 插槽

header: 卡片头部内容
body: 卡片主体内容，也可以放置在slot中
footer: 卡片底部内容

轮播

一个Bootstrap轮播

@php($images = [
  [
    'src' => 'https://via.placeholder.com/800x400?text=First+slide',
    'alt' => 'First slide',
    'caption' => 'First slide caption',
  ],
  [
    'src' => 'https://via.placeholder.com/800x400?text=Second+slide',
    'alt' => 'Second slide',
    'caption' => 'Second slide caption',
  ],
  [
    'src' => 'https://via.placeholder.com/800x400?text=Third+slide',
    'alt' => 'Third slide',
    'caption' => 'Third slide caption',
  ],
])
<x-bs::carousel :images="$images" />

可用的属性 & 插槽

images: 图片数组
indicators: 显示轮播指示器
controls: 显示轮播控件
id: 轮播id

检查

一个Bootstrap复选框输入

<x-bs::check :label="__('Agree')" :checkLabel="__('I agree to the TOS')" :help="__('Please accept the TOS.')" switch model="agree" />

可用的属性 & 插槽

label: 在输入上方显示的标签
checkLabel: 在输入旁边显示的标签
help: 在输入下方显示的帮助标签
switch: 将输入样式设置为开关
model: Livewire模型属性键
lazy: 在更改时绑定Livewire数据

关闭

一个Bootstrap关闭按钮

<x-bs::close dismiss="modal" />

可用的属性 & 插槽

color: Bootstrap关闭颜色，例如white
dismiss: data-bs-dismiss的值，例如alert、modal

颜色

一个Bootstrap颜色选择器输入

<x-bs::color :label="__('Favorite Color')" :prepend="__('I like')" :append="_('the most.')" :help="__('Please pick a color.')" model="favorite_color" />

可用的属性 & 插槽

label: 在输入上方显示的标签
icon：在输入框前显示的 Font Awesome 图标，例如 cog、envelope
prepend：在输入框前显示的附加组件，可以通过命名插槽使用
append：在输入框后显示的附加组件，可以通过命名插槽使用
size：Bootstrap 输入框大小，例如 sm、lg
help: 在输入下方显示的帮助标签
model: Livewire模型属性键
lazy: 在更改时绑定Livewire数据

数据列表

Bootstrap 数据列表输入框

<x-bs::datalist :label="__('City Name')" :options="['Toronto', 'Montreal', 'Las Vegas']" :prepend="__('I live in')" :append="_('right now.')" :help="__('Please enter your city.')" model="city_name" />

可用的属性 & 插槽

label: 在输入上方显示的标签
options：输入框选项数组，例如 ['Red', 'Blue']
icon：在输入框前显示的 Font Awesome 图标，例如 cog、envelope
prepend：在输入框前显示的附加组件，可以通过命名插槽使用
append：在输入框后显示的附加组件，可以通过命名插槽使用
size：Bootstrap 输入框大小，例如 sm、lg
help: 在输入下方显示的帮助标签
model: Livewire模型属性键
debounce：在 keyup 事件上绑定 Livewire 数据的时间（毫秒），例如 500
lazy: 在更改时绑定Livewire数据

描述

描述列表

<x-bs::desc :term="__('ID')" :details="$user->id" />

可用的属性 & 插槽

tern：描述列表的术语
details：描述列表的详细信息，也可以放置在 slot 中
date：用于代替详细信息的日期（用于与 Laravel Timezone 一起使用）

下拉菜单

Bootstrap 下拉菜单

<x-bs::dropdown :label="__('Filter')" color="danger">
    <x-bs::dropdown-item :label="__('By Name')" click="$set('filter', 'name')" />
    <x-bs::dropdown-item :label="__('By Age')" click="$set('filter', 'age')" />
</x-bs::dropdown>

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label：要显示的下拉菜单标签，可以通过命名插槽使用
items：下拉菜单项，也可以放置在 slot 中
color: Bootstrap颜色，例如primary、danger、success
size: Bootstrap按钮大小，例如sm、lg

下拉菜单项

Bootstrap 下拉菜单项

<x-bs::dropdown-item :label="__('Login')" route="login" />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
route: 将href设置为路由
url: 将href设置为URL
href: 设置href

表单

Bootstrap 表单

<x-bs::form submit="login">
    <x-bs::input :label="__('Email')" type="email" model="email"/>
    <x-bs::input :label="__('Password')" type="password" model="password"/>
    <x-bs::button :label="__('Login')" type="submit"/>
</x-bs::form>

可用的属性 & 插槽

submit：提交时 Livewire 的操作

图标

Font Awesome 图标

<x-bs::icon name="cog" />

可用的属性 & 插槽

name：Font Awesome 图标名称，例如 cog、rocket
style：Font Awesome 图标样式，例如 solid、regular、brands
size：Font Awesome 图标大小，例如 sm、lg、3x、5x
color: Bootstrap颜色，例如primary、danger、success
spin：使图标使用旋转动画
pulse：使图标使用脉冲动画

图片

<x-bs::image asset="images/logo.png" height="24" rounded />

可用的属性 & 插槽

asset：将 src 设置为资产
src：设置 src
fluid：将图片设置为流体宽度
thumbnail：将图片设置为缩略图样式
rounded：将图片设置为圆角样式

输入

Bootstrap 文本输入框

<x-bs::input :label="__('Email Address')" type="email" :help="__('Please enter your email.')" model="email_address">
    <x-slot name="prepend">
        <i class="fa fa-envelope"></i>
    </x-slot>
</x-bs::input>

可用的属性 & 插槽

label: 在输入上方显示的标签
type：输入框类型，例如 text、email
icon：在输入框前显示的 Font Awesome 图标，例如 cog、envelope
prepend：在输入框前显示的附加组件，可以通过命名插槽使用
append：在输入框后显示的附加组件，可以通过命名插槽使用
size：Bootstrap 输入框大小，例如 sm、lg
help: 在输入下方显示的帮助标签
model: Livewire模型属性键
debounce：在 keyup 事件上绑定 Livewire 数据的时间（毫秒），例如 500
lazy: 在更改时绑定Livewire数据

链接

超链接

<x-bs::link :label="__('Users')" route="users" />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
route: 将href设置为路由
url: 将href设置为URL
href: 设置href

模态框

Bootstrap 模态框

<x-bs::modal id="profile.update">
  <x-slot name="title">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </slot>
    <x-slot name="body">
        <p>Modal body text goes here.</p>
    </slot>
      <x-slot name="footer" class="text-body-secondary">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </slot>
</x-bs::modal>

可用的属性 & 插槽

title：模态框标题内容
body：模态框主体内容
footer：模态框底部内容
class：模态框类，例如 modal-lg、modal-dialog-centered

导航下拉菜单

Bootstrap 导航下拉菜单

<x-bs::nav-dropdown :label="Auth::user()->name">
    <x-bs::dropdown-item :label="__('Update Profile')" click="$emit('showModal', 'profile.update')" />
    <x-bs::dropdown-item :label="__('Logout')" click="logout" />
</x-bs::nav-dropdown>

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label：要显示的下拉菜单标签，可以通过命名插槽使用
items：下拉菜单项，也可以放置在 slot 中

导航链接

Bootstrap 导航链接

<x-bs::nav-link :label="__('Users')" route="users" />

可用的属性 & 插槽

icon: 在标签之前显示的Font Awesome图标，例如cog、envelope
label: 要显示的标签，也可以放置在slot中
route: 将href设置为路由
url: 将href设置为URL
href: 设置href

分页

响应式 Bootstrap 分页链接

<x-bs::pagination :links="App\Models\User::paginate()" justify="center" />

可用的属性 & 插槽

links：分页的 Laravel 模型
justify：Bootstrap 对齐方式，例如 start、end

进度条

Bootstrap 进度条

<x-bs::progress :label="__('25% Complete')" percent="25" color="success" height="10" animated striped />

可用的属性 & 插槽

label：进度条内部显示的标签
percent：进度条的百分比
color: Bootstrap颜色，例如primary、danger、success
height：进度条的高度（像素）
animated：动画进度条
striped：进度条使用条纹样式

单选按钮

Bootstrap 单选框输入

<x-bs::radio :label="__('Gender')" :options="['Male', 'Female']" :help="__('Please select your gender.')" switch model="gender" />

可用的属性 & 插槽

label: 在输入上方显示的标签
options：输入框选项数组，例如 ['Red', 'Blue']
help: 在输入下方显示的帮助标签
switch：将输入设置为开关样式
model: Livewire模型属性键
lazy: 在更改时绑定Livewire数据

选择框

Bootstrap 选择框输入

@php($countries = ['Australia', 'Canada', 'USA'])
<x-bs::select :label="__('Your Country')" :placeholder="__('Select Country')" :options="$countries" :prepend="__('I live in')" :append="_('right now.')" :help="__('Please select your country.')" model="your_country" />

可用的属性 & 插槽

label: 在输入上方显示的标签
placeholder：用于空第一个选项的占位符
options：输入框选项数组，例如 ['Red', 'Blue']
icon：在输入框前显示的 Font Awesome 图标，例如 cog、envelope
prepend：在输入框前显示的附加组件，可以通过命名插槽使用
append：在输入框后显示的附加组件，可以通过命名插槽使用
size：Bootstrap 输入框大小，例如 sm、lg
help: 在输入下方显示的帮助标签
model: Livewire模型属性键
lazy: 在更改时绑定Livewire数据

文本区域

Bootstrap 文本区域输入

<x-bs::textarea :label="__('Biography')" rows="5" :help="__('Please tell us about yourself.')" model="biography" />

可用的属性 & 插槽

label: 在输入上方显示的标签
icon：在输入框前显示的 Font Awesome 图标，例如 cog、envelope
prepend：在输入框前显示的附加组件，可以通过命名插槽使用
append：在输入框后显示的附加组件，可以通过命名插槽使用
size：Bootstrap 输入框大小，例如 sm、lg
help: 在输入下方显示的帮助标签
model: Livewire模型属性键
debounce：在 keyup 事件上绑定 Livewire 数据的时间（毫秒），例如 500
lazy: 在更改时绑定Livewire数据

特质

WithModel

这个特性使得对表单数据模型进行操作变得简单。不再需要为每个表单输入创建 Livewire 组件属性。所有表单数据都将放置在 $model 属性数组中。

获取模型数据

以集合的形式获取模型数据

$collection = $this->model();

设置模型数据

设置单个值

$this->setModel('name', 'Kevin');

使用 Eloquent 模型数据设置值

$this->setModel(User::first());

使用数组设置值

$this->setModel([
    'name' => 'Kevin',
    'email' => 'kevin@example.com',
]);

处理数组

添加一个空数组项

$this->addModelItem('locations');

通过键移除数组项

$this->removeModelItem('locations', 3);

按键和方向排序数组项

$this->orderModelItem('locations', 3, 'up');

方向应该是 up 或 down。

绑定模型数据

组件通过 model 属性与这个特性一起工作

<x-bs::input :label="__('Name')" model="name"/>
<x-bs::input :label="__('Email')" type="email" model="email"/>

验证模型数据

使用 validateModel 方法来验证模型数据

$this->validateModel([
    'name' => ['required'],
    'email' => ['required', 'email'],
]);

这个方法与 Livewire 的 validate 方法类似，所以如果你愿意，可以在单独的 rules 方法中指定你的规则。

发布资源

自定义视图

通过发布包视图使用你自己的组件视图

php artisan vendor:publish --tag=laravel-bs5-components:views

现在编辑 resources/views/vendor/bs 内的文件。该包将使用这些文件来渲染组件。

自定义图标

通过发布包配置来使用您自己的字体图标

php artisan vendor:publish --tag=laravel-bs5-components:config

现在编辑 config/laravel-bs5-components.php 内的 icon_class_prefix 值。该包将使用这个类来渲染图标。

shawe / laravel-bs5-components

维护者

详细信息

README

文档

要求

安装

组件

手风琴

可用的属性 & 插槽

手风琴项

可用的属性 & 插槽

警报

可用的属性 & 插槽

徽章

可用的属性 & 插槽

面包屑

按钮

可用的属性 & 插槽

卡片

可用的属性 & 插槽

轮播

可用的属性 & 插槽

检查

可用的属性 & 插槽

关闭

可用的属性 & 插槽

颜色

可用的属性 & 插槽

数据列表

可用的属性 & 插槽

描述

可用的属性 & 插槽

下拉菜单

可用的属性 & 插槽

下拉菜单项

可用的属性 & 插槽

表单

可用的属性 & 插槽

图标

可用的属性 & 插槽

图片

可用的属性 & 插槽

输入

可用的属性 & 插槽

链接

可用的属性 & 插槽

模态框

可用的属性 & 插槽

导航下拉菜单

可用的属性 & 插槽

导航链接

可用的属性 & 插槽

分页

可用的属性 & 插槽

进度条

可用的属性 & 插槽

单选按钮

可用的属性 & 插槽

选择框

可用的属性 & 插槽

文本区域

可用的属性 & 插槽

特质

WithModel

获取模型数据

设置模型数据

处理数组

绑定模型数据

验证模型数据

发布资源

自定义视图

自定义图标