README

此包包含一组有用的 Bootstrap Laravel Blade 组件。它推广了 DRY 原则，并允许您保持 HTML 简洁。组件包括警告框、徽章、按钮、表单输入（带自动错误反馈）、下拉菜单、导航栏、分页（响应式）等。组件内置 Laravel 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: 绑定 Livewire 数据的 keyup 时间（以毫秒为单位），例如 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: 绑定 Livewire 数据的 keyup 时间（以毫秒为单位），例如 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: 绑定 Livewire 数据的 keyup 时间（以毫秒为单位），例如 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值。包将使用这个类来渲染图标。

ova-studio / laravel-bootstrap-components

维护者

详细信息

README

文档

需求

安装

组件

警告框

可用属性 & 插槽

徽章

可用属性 & 插槽

按钮

可用属性 & 插槽

复选框

可用属性 & 插槽

关闭

可用属性 & 插槽

颜色

可用属性 & 插槽

数据列表

可用属性 & 插槽

描述

可用属性 & 插槽

下拉菜单

可用属性 & 插槽

下拉菜单项

可用属性 & 插槽

表单

可用属性 & 插槽

图标

可用属性 & 插槽

图片

可用属性 & 插槽

输入框

可用属性 & 插槽

链接

可用属性 & 插槽

导航下拉菜单

可用属性 & 插槽

导航链接

可用属性 & 插槽

分页

可用属性 & 插槽

进度条

可用属性 & 插槽

单选框

可用属性 & 插槽

下拉框

可用属性 & 插槽

文本域

可用属性 & 插槽

特性

WithModel

获取模型数据

设置模型数据

与数组一起工作

绑定模型数据

验证模型数据

发布资产

自定义视图

自定义图标