README

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

文档

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

要求

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

安装

通过 composer 需要此包

composer require bastinald/laravel-bootstrap-components

组件

警报

Bootstrap 警报

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

可用的 Props & Slots

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

徽章

Bootstrap 徽章

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

可用的 Props & Slots

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

按钮

Bootstrap 按钮

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

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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

关闭

Bootstrap 关闭按钮

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

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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>

可用的 Props & Slots

submit：提交时的 Livewire 动作

图标

一个 Font Awesome 图标

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

可用的 Props & Slots

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
/>

可用的 Props & Slots

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>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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>

可用的 Props & Slots

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

导航链接

一个 Bootstrap 导航链接

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

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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

进度条

一个 Bootstrap 进度条

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

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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"
/>

可用的 Props & Slots

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 值。包将使用此类来渲染图标。

pxfzhkryfa / laravel-bootstrap-components

维护者

详细信息

README

文档

要求

安装

组件

警报

可用的 Props & Slots

徽章

可用的 Props & Slots

按钮

可用的 Props & Slots

复选框

可用的 Props & Slots

关闭

可用的 Props & Slots

颜色

可用的 Props & Slots

数据列表

可用的 Props & Slots

描述

可用的 Props & Slots

下拉菜单

可用的 Props & Slots

下拉菜单项

可用的 Props & Slots

表单

可用的 Props & Slots

图标

可用的 Props & Slots

图片

可用的 Props & Slots

输入

可用的 Props & Slots

链接

可用的 Props & Slots

导航下拉菜单

可用的 Props & Slots

导航链接

可用的 Props & Slots

分页

可用的 Props & Slots

进度条

可用的 Props & Slots

单选框

可用的 Props & Slots

选择框

可用的 Props & Slots

文本框

可用的 Props & Slots

特性

WithModel

获取模型数据

设置模型数据

与数组一起工作

绑定模型数据

验证模型数据

发布资源

自定义视图

自定义图标