README

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

文档

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

需求

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

安装

通过 composer 安装包

composer require bastinald/laravel-bootstrap-components

组件

警报

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::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::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：使用 details 代替的日期（用于与 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::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选择框输入

<x-bs::select
    :label="__('Your Country')"
    :placeholder="__('Select Country')"
    :options="['Australia', 'Canada', 'USA']"
    :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-bootstrap-components:views

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

自定义图标

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

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

现在编辑config/laravel-bootstrap-components.php中的icon_class_prefix值。该包将使用此类来渲染图标。

mattneal / laravel-bootstrap-components

维护者

详细信息

README

文档

需求

安装

组件

警报

可用属性 & 插槽

徽章

可用属性 & 插槽

按钮

可用属性 & 插槽

检查

可用属性 & 插槽

关闭

可用属性 & 插槽

颜色

可用属性 & 插槽

数据列表

可用属性 & 插槽

描述

可用属性 & 插槽

下拉菜单

可用属性 & 插槽

下拉菜单项

可用属性 & 插槽

表单

可用属性 & 插槽

图标

可用属性 & 插槽

图片

可用属性 & 插槽

输入

可用属性 & 插槽

链接

可用属性 & 插槽

导航下拉菜单

可用属性 & 插槽

导航链接

可用属性 & 插槽

分页

可用属性 & 插槽

进度条

可用属性 & 插槽

单选按钮

可用属性 & 插槽

选择框

可用属性 & 插槽

文本区域

可用属性 & 插槽

特质

WithModel

获取模型数据

设置模型数据

与数组一起工作

绑定模型数据

验证模型数据

发布资源

自定义视图

自定义图标