README

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

此仓库受到 Laravel Bootstrap 组件的启发

如果您想要 Bootstrap 版本，感谢

bastinald/laravel-bootstrap-components

文档

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

要求

UI Kit 5 必须首先通过 webpack 安装
要使用图标，必须安装 Font Awesome

安装

通过 composer 需求此包

composer require vheins/laravel-uikit-components

组件

警告框

一个 UIKit 警告框

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

可用属性和插槽

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

徽章

一个 UIKit 徽章

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

可用属性和插槽

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

按钮

一个 UIKit 按钮

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

可用属性和插槽

icon: 在标签之前显示的 Font Awesome 图标，例如 cog、envelope
label: 要显示的标签，也可以放在 slot 中
color: UIKit 颜色，例如 primary、danger、success
size: UIKit 按钮大小，例如 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: 点击时提示用户确认

复选框

一个 UIKit 复选框输入框

<x-uk::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 数据

关闭

一个 UIKit 关闭按钮

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

可用属性和插槽

color: UIKit 关闭颜色，例如 white
dismiss: 一个 data-bs-dismiss 值，例如 alert、modal

颜色

一个 UIKit 颜色选择器输入框

<x-uk::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: UIKit 输入框大小，例如 sm、lg
help: 在输入框下方显示的帮助标签
model: Livewire 模型属性键
lazy: 在更改时绑定 Livewire 数据

数据列表

一个 UIKit 数据列表输入框

<x-uk::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: UIKit 输入框大小，例如 sm、lg
help: 在输入框下方显示的帮助标签
model: Livewire 模型属性键
debounce: 绑定 Livewire 数据在 keyup 时的时间（毫秒），例如 500
lazy: 在更改时绑定 Livewire 数据

描述

一个描述列表

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

可用属性和插槽

tern: 描述列表项
details: 描述列表详细信息，也可以放在 slot 中
日期：使用日期而不是详细信息（与 Laravel Timezone 一起使用）

下拉菜单

UI 套件下拉菜单

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

可用属性和插槽

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

下拉菜单项

UI 套件下拉菜单项

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

可用属性和插槽

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

表单

UI 套件表单

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

可用属性和插槽

提交：Livewire 提交动作

图标

Font Awesome 图标

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

可用属性和插槽

名称：Font Awesome 图标名称，例如 cog，rocket
样式：Font Awesome 图标样式，例如 solid，regular，brands
大小：Font Awesome 图标大小，例如 sm，lg，3x，5x
color: UIKit 颜色，例如 primary、danger、success
旋转：将图标设置为使用旋转动画
脉冲：将图标设置为使用脉冲动画

图片

图像

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

可用属性和插槽

资产：将 src 设置为资产
src：设置 src
流动：将图像设置为流动宽度
缩略图：将图像设置为使用缩略图样式
圆角：将图像设置为有圆角

输入框

UI 套件文本输入

<x-uk::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-uk::input>

可用属性和插槽

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

链接

超链接

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

可用属性和插槽

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

导航下拉菜单

UI 套件导航下拉菜单

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

可用属性和插槽

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

导航链接

UI 套件导航链接

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

可用属性和插槽

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

分页

响应式 UI 套件分页链接

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

可用属性和插槽

链接：分页的 Laravel 模型
对齐：UI 套件对齐，例如 start，end

进度条

UI 套件进度条

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

可用属性和插槽

标签：进度条内显示的标签
百分比：进度条百分比
color: UIKit 颜色，例如 primary、danger、success
高度：进度条像素高度
动画：动画进度条
条纹：使用条纹样式为进度条

单选按钮

UI 套件单选输入

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

可用属性和插槽

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

选择框

UI 套件选择输入

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

文本区域

UI 套件文本区域输入

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

可用属性和插槽

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

特性

带有模型

此特性使表单数据模型操作变得简单。不再需要为每个表单输入创建 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-uk::input :label="__('Name')" model="name"/>
<x-uk::input :label="__('Email')" type="email" model="email"/>

验证模型数据

使用 validateModel 方法验证模型数据

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

此方法与 Livewire validate 方法类似，因此如果您愿意，可以在单独的 rules 方法中指定您的规则。

发布资源

自定义视图

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

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

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

自定义图标

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

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

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

vheins / laravel-uikit-components

维护者

详细信息

README

此仓库受到 Laravel Bootstrap 组件的启发

文档

要求

安装

组件

警告框

可用属性和插槽

徽章

可用属性和插槽

按钮

可用属性和插槽

复选框

可用属性和插槽

关闭

可用属性和插槽

颜色

可用属性和插槽

数据列表

可用属性和插槽

描述

可用属性和插槽

下拉菜单

可用属性和插槽

下拉菜单项

可用属性和插槽

表单

可用属性和插槽

图标

可用属性和插槽

图片

可用属性和插槽

输入框

可用属性和插槽

链接

可用属性和插槽

导航下拉菜单

可用属性和插槽

导航链接

可用属性和插槽

分页

可用属性和插槽

进度条

可用属性和插槽

单选按钮

可用属性和插槽

选择框

可用属性和插槽

文本区域

可用属性和插槽

特性

带有模型

获取模型数据

设置模型数据

处理数组

绑定模型数据

验证模型数据

发布资源

自定义视图

自定义图标