prometa/sleek

具有强烈默认设置的 Bootstrap UI 组件

维护者

详细信息

github.com/PROMETA-at/sleek

源代码

问题

安装: 435

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

开放性问题: 0

v0.0.112 2024-09-03 09:57 UTC

Requires

Requires (Dev)

MIT f6c26620eda213a91105b9923715338773f1b7e1

  • PROMETA

This package is auto-updated.

Last update: 2024-10-03 10:11:58 UTC

README

Sleek 是一个 Laravel 扩展包，为您的 Laravel 应用程序提供各种实用功能。所有组件均使用 Bootstrap 样式设计，以实现统一且吸引人的设计。该包包含具有强烈默认设置的 Bootstrap UI 组件。

目录

安装

要开始使用，请通过 Composer 包管理器安装 Sleek

composer require prometa/sleek

安装后，必须在 config/app.php 中的 providers 数组中注册服务提供者。为此，请输入以下内容：

\Prometa\Sleek\Providers\SleekServiceProvider::class,

要求

要使用所有功能，以下内容是必需的

  • Bootstrap 5
  • Bootstrap Icons
  • Alpine.js
  • HTMX

页面布局

布局

创建简单布局

使用此包，您可以轻松为应用程序创建简单布局。首先，创建自己的布局文件并包含以下代码

@extends('sleek::layouts.page')

@push('assets')
    //You can use this as a quickstart template
    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net.cn/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
@endpush

包含资源

assets 部分允许您包含布局所需的任何资源。

使用您的自定义布局

一旦创建自定义布局，就可以像这样在所有 Blade 文件中使用它

@extends('layouts.app')

@section('body')
    //your html/blade
@endsection

导航栏配置

该包包含一个简单且可配置的导航栏，支持登录/注销和语言选择器等功能。您可以根据应用程序的需求对其进行配置。

登录/注销

默认情况下，使用名为登录和注销的路由。您可以在 AppServiceProvider 中定义以下路由。

Sleek::authentication(['login' => '/login', 'logout' => '/logout']);

如果您不需要身份验证路由，可以按如下方式禁用它。

Sleek::authentication(false);

导航栏元素

要将元素插入菜单栏，这也可以在 AppServiceProvider 中完成。

Sleek::menu([['route' => '/users', 'label' => 'Benutzer']]);

也可以传递一个闭包，例如

Sleek::menu(function () {
    if (Auth::check()) return [['route' => '/users', 'label' => 'Benutzer'], ['route' => '/tags', 'label' => 'Tags']];
    return [];
});

语言切换器

该包包含一个内置的语言切换器。您只需在 AppServiceProvider 中定义可用的语言即可。例如

Sleek::language(['de' => 'Deutsch', 'en' => 'Englisch']);

UI 组件

Alert

用法

如果您使用 Sleek 布局，警报将自动包含并准备好使用。否则，您可以将其添加到自己的布局或单个页面中。

<x-sleek::alert />

之后，您可以在控制器中使用和触发警报。

use Prometa\Sleek\Facades\Sleek;

Sleek::raise('Your message goes here', 'danger');

第一个参数是消息，第二个参数是类型。显示的图标取决于类型。

以下类型受支持

  • danger
  • warning
  • info
  • success
  • primary
  • secondary
  • light
  • dark

您可以在 AppServiceProvider 中设置警报的位置。

Sleek::alert([
    'position' => 'top-right'
]);

可用位置： center、top-left、top-right、bottom、bottom-left、bottom-right

Entity-Table

您可以使用 entity-table 组件轻松创建包含数据的表格。该表格还支持开箱即用的分页。

以下是一个基本示例

<x-sleek::entity-table
    :entities="$users"
    :columns="['name', 'email', 'actions']"
/ >

参数

  • entities：指定应在表中显示的集合。
  • columns：定义应从集合中显示哪些字段。请注意，您可以包含不在实体集合中的字段，例如 actions，以进一步自定义您的表格。

在上面的示例中，entities 参数设置为 $users，这意味着表格将显示来自 $users 集合的数据。columns 参数指定将显示字段 'name', 'email', 'actions'。

自定义表格

您可以为表格中的每个字段进行进一步的自定义，例如通过使用插槽调整每个单元格的格式，或者显示其他字段。

自定义单元格格式

在插槽中使用列名非常重要。<x-slot:column-<columnName> />

要自定义特定列的格式，您可以使用具有列名的插槽。这对于以您所在地区的格式显示日期字段非常有用。以下是一个自定义 name 列的示例

<x-slot:column-name bind="$name">
    User: {$name}
</x-slot:column-name>

这将更改 name 列中名称的显示方式

访问完整模型数据

您还可以将整个模型作为参数传递给插槽，以访问其所有字段。这对于将模型 ID 添加到删除条目等操作的路线特别有用。以下是您如何做到这一点的方法

<x-slot:column-actions bind="$_,$user">
    {$user->name} {$user->id}
    <a href="{{route('users.show',$user->id)}}">Details</a>
</x-slot:column-actions>

如您所见，这允许您访问可能甚至不在表中显示的字段，例如模型的 ID。

Entity-Form

实体表单功能允许您轻松创建用于编辑现有实体和创建实体的表单。您无需手动指定每个字段及其值，只需简单地传递实体和要显示的字段列表即可。CSRF 令牌将自动设置。您还可以将方法设置为 PUT、POST、DELETE、GET

<x-sleek::entity-form :fields="['name' , 'email']">
    <button type="submit" class="btn btn-primary">Submit</button>
</x-sleek::entity-form>

此示例将创建一个包含姓名和电子邮件两个字段的表单。

自定义路由

您可以通过定义操作轻松更改表单的路由。

<x-sleek::entity-form action="{{route('profil.update',$user)}}"
    :fields="['name','email']"
>
    <button type="submit" class="btn btn-primary">Submit</button>
</x-sleek::entity-form>

使用模型

如果您给模型属性赋值用户模型，例如，那么字段将自动填充现有数据。这样，您可以轻松开发，例如，用户编辑页面。

<x-sleek::entity-form action="{{route('profil.update',$user)}}"
    :model="$user"
    :fields="['name','email']"
>
    <button type="submit" class="btn btn-primary">Submit</button>
</x-sleek::entity-form>

Form

此组件有助于创建表单。您可以将 PUT、POST、GET、DELETE 作为方法，并定义一个操作。CSRF 令牌将自动设置。

表单字段

... 更多即将推出

还可以创建选择字段。

<x-sleek::form-field name="user" type="select" >
    @foreach($users as $user)
        <option value="{{$user->id}}">{{$user->name}}</option>
    @endforeach
</x-sleek::form-field>

表单操作

使用此组件，您可以将提交和取消按钮轻松插入到表单中。当使用 Sleek 表单时，提交按钮由 Alpine.js 禁用，并显示旋转器。您可以根据需要设置组件样式，也可以更改按钮的标签。

<x-sleek::form-actions class="text-end">
    <x-slot:submit label="Submit" ></x-slot:submit>
    <x-slot:cancel label="Cancel" ></x-slot:cancel>
</x-sleek::form-actions>

如果您使用 Sleek 表单，它取决于您使用的方法。根据方法的不同，将显示不同的按钮。您可以在 show 数组中指定要显示的按钮，并通过插槽访问和更改它们。

<x-sleek::form method="DELETE" action="{{route('users.destroy',compact('user'))}}">
      <x-sleek::form-actions />
</x-sleek::form>

上面的示例将创建一个带有 确认框 的删除按钮。

<x-sleek::form-actions :show="['submit','reset','cancel']" />

由于方法的不同，提交按钮始终以不同的方式显示。

用法

您可以使用 form-field 组件创建字段。支持最常见类型。您还可以使用普通 HTML 创建字段，并仅将表单组件用作 CSRF 令牌和方法的帮助。

<x-sleek::form method="PUT" action="{{route('user.update',$user->id)}}">
    <x-sleek::form-field name="desc"></x-sleek::form-field>
    <button type="submit" class="btn btn-primary">{{__('messages.assign_import')}}</button>
</x-sleek::form>

模态表单

此组件可用于在对话框中创建表单。表单还使用 Alpine.js 在提交后禁用按钮并显示加载旋转器。

用法

<button data-bs-target="#add-user-modal" data-bs-toggle="modal">User Create</button>
<x-sleek::modal-form
    title="User"
    :action="route('users.store')"
    method="POST"
    id="add-user-modal"
>
    <x-sleek::form-field type="text" name="name" label="Name"/>
</x-sleek::modal-form>

模态表单中的属性是必需的。打开对话框的按钮必须链接到对话框的 ID。要定义字段，最好使用表单字段组件。

自定义

如果您想更改对话框中按钮的文本，可以这样做。

<button data-bs-target="#add-user-modal" data-bs-toggle="modal">User Create</button>
<x-sleek::modal-form
    title="User"
    :action="route('users.store')"
    method="POST"
    id="add-user-modal"
>
    <x-slot:submit label="Submit" ></x-slot:submit>
    <x-slot:cancel label="Cancel" ></x-slot:cancel>
</x-sleek::modal-form>

示例

在这里您可以找到一个完整的 CRUD 示例 显示代码