表单元素

字段用于生成填写和编辑表单模板的输出。表单元素是用户界面的构建块，它们允许您创建界面的不同部分并提供与用户的交互。在本节中，我们将介绍最常见的表单元素及其用法。

欢迎添加您的字段，例如，使用方便的编辑器或任何组件。

输入介绍

输入是最通用的表单元素之一。它允许您创建文本字段，以及其他类型的输入，如数字、电子邮件、密码等。以下是创建简单文本输入字段的示例：

此图显示了一个简单的文本输入框。这是一个常见的用户界面元素，允许用户在网页表单中输入文本或其他数据。

示例：

use Orchid\Screen\Fields\Input;

Input::make('name');

设计输入界面

空白且无表情的输入字段可能会让用户感到困惑，但您可以通过指定标题来帮助用户。标题应为简短且描述性的标签，清楚地传达字段的用途。以下是如何为输入字段添加标题的示例：

Input::make('name')
    ->title('名字');

如果您需要为字段提供额外的上下文或说明，可以使用 help 方法添加提示或简短描述。提示应为简短且简洁的信息，帮助用户理解字段的用途或格式。以下是如何为输入字段添加提示的示例：

Input::make('name')
    ->help('你的名字是什么？');

如果字段需要更详细的说明或指导，您可以使用 popover 方法添加工具提示，当用户悬停在字段上时会显示为弹出窗口。工具提示应提供额外的信息或指导，帮助用户正确完成字段。以下是如何为输入字段添加工具提示的示例：

Input::make('name')
    ->popover('工具提示 - 用户自行打开的提示。');

默认情况下，表单元素以水平布局显示，标签和输入字段并排显示。但是，您可以使用 vertical() 方法将布局更改为垂直排列：

Input::make('name')->vertical();

如果您更喜欢水平布局，可以使用 horizontal() 方法恢复它：

Input::make('name')->horizontal();

必填字段

有时您可能需要指定某个字段是必填的，这意味着用户必须在字段中输入值才能提交表单。要将字段标记为必填，可以使用 required() 方法：

Input::make('name')
    ->type('text')
    ->required();

您还可以在其他类型的表单元素上使用 required() 方法，例如选择框、单选按钮和复选框。

隐藏输入字段

有时您可能希望在用户界面中隐藏某个表单元素，无论是暂时的还是永久的。要隐藏表单元素，可以使用 canSee() 方法并传递值 false：

Input::make('name')->canSee(false);

如果您想显示先前隐藏的表单元素，可以使用 canSee() 方法并传递值 true：

Input::make('name')->canSee(true);

请注意，许多方法，如 canSee、required、title、help、vertical、horizontal 等，几乎在系统的每个 field 中都可用。

输入类型

最通用的字段之一是 input 字段，它允许您指定多种类型，如文本、文件、隐藏、颜色、电子邮件、数字、范围和网址。类型属性决定了您要创建的输入字段的种类以及它将接受的数据类型。以下是使用 type 方法的一些示例：

Input::make('name')->type('text');

用于输入发送到服务器的文件名的字段。

Input::make('name')->type('file');

隐藏字段。

Input::make('name')->type('hidden');

选择颜色的小部件。

Input::make('name')->type('color');

用于电子邮件地址。

Input::make('name')->type('email');

输入数字。

Input::make('name')->type('number');

在指定范围内选择数字的滑块。

Input::make('name')->type('range');

用于指定网址。

Input::make('name')->type('url');

请注意。请注意，支持新 HTML5 属性如 color 和 range 取决于所使用的浏览器。您可以在 Mozilla 的网站上了解更多关于属性类型的信息。

输入值掩码

掩码是用于强制用户输入特定格式的有用工具。例如，您可能希望使用掩码来确保电话号码以标准格式输入，或货币值以正确的小数位数输入。

要在输入字段中使用掩码，可以使用 mask() 方法并传递一个定义输入格式的字符串。字符串应包含允许的字符占位符和任何应包含的固定字符。以下是使用掩码强制执行标准电话号码格式的示例：

Input::make('phone')
    ->mask('(999) 999-9999')
    ->title('电话号码');

您还可以传递选项数组给 mask() 方法以自定义掩码的行为。例如，您可以使用 numericInput 选项来指定只接受数字字符：

Input::make('price')
    ->title('价格')
    ->mask([
        'mask' => '999 999 999.99',
        'numericInput' => true
    ]);

您还可以使用 alias 选项使用预定义的掩码，例如 currency，它会自动将输入格式化为货币值：

Input::make('price')
    ->title('价格')
    ->mask([
        'alias' => 'currency',
        'prefix' => ' ',
        'groupSeparator' => ' ',
        'digitsOptional' => true,
    ]);

您可以在这里查看 Inputmask 库的所有可用选项。

文本区域

textarea 字段是一个允许用户输入多行文本的表单元素。它类似于输入字段，但设计用于接受较长的文本并保留换行符。

要创建 textarea 字段，可以使用 TextArea 类：

use Orchid\Screen\Fields\TextArea;

TextArea::make('description');

默认情况下，textarea 字段将根据输入的文本量自动扩展。但是，您可以使用 rows 方法指定最小行数：

TextArea::make('description')
    ->rows(5);

这对于提供文本量的清晰视觉指示很有用。

与其他表单元素一样，您可以使用 title()、help() 和 popover() 方法为用户添加额外的上下文和指导。您还可以使用 required() 方法将 textarea 字段标记为 required，并使用 canSee() 方法显示或隐藏字段。

复选框

复选框是一个图形用户界面元素，允许用户控制具有两种状态的参数 – 选中和未选中。复选框通常用于表示二进制选择，例如某个功能是否启用或禁用。

要创建复选框字段，可以使用 CheckBox 类：

use Orchid\Screen\Fields\CheckBox;

CheckBox::make('free')
    ->value(1)
    ->title('免费')
    ->placeholder('免费活动')
    ->help('免费活动');

value 属性决定了复选框选中时将发送到服务器的值。title 属性为复选框提供标签，placeholder 属性可用于提供默认值或简短描述。help 属性可用于为用户提供额外的上下文或说明。

默认情况下，浏览器在表单提交时不会发送未选中复选框的值。这使得使用简单布尔值的复选框变得困难。为了解决这个问题，您可以使用 sendTrueOrFalse() 方法，当复选框未选中时，它将发送值 false 到服务器：

CheckBox::make('enabled')
    ->sendTrueOrFalse();

这对于确保服务器接收到复选框状态的明确指示很有用。

选择框

选择字段是一个表单元素，允许用户从下拉列表中选择一个选项。它对于呈现有限的选项集并允许用户进行选择很有用。

要创建选择字段，可以使用 Select 类：

use Orchid\Screen\Fields\Select;

Select::make('select')
    ->options([
        'index'   => '索引',
        'noindex' => '不索引',
    ])
    ->title('选择标签')
    ->help('允许搜索机器人索引');

options 属性是一个定义将在下拉列表中显示的选项的数组。数组的键是将发送到服务器的值，值是将显示给用户的标签。

除了使用选项数组，您还可以使用数据源填充选择字段的选项。例如，您可以使用模型检索选项：

Select::make('user')
    ->fromModel(User::class, 'email');

这将从 User 模型中检索所有记录，并使用 email 字段作为每个选项的标签。您还可以使用自定义查询检索选项：

Select::make('user')
    ->fromQuery(User::where('balance', '!=', '0'), 'email');

这将从 User 模型中检索 balance 字段不等于 0 的所有记录，并使用 email 字段作为每个选项的标签。

您还可以使用 fromModel() 和 fromQuery() 方法指定用作每个选项键的不同字段：

Select::make('user')
    ->fromModel(User::class, 'email', 'uuid');

这将使用 uuid 字段作为每个选项的键，而不是默认的主键。

如果您想提供一个表示未选择状态的选项，可以使用 empty() 方法：

// 对于数组
Select::make('user')
    ->options([
        1  => '选项 1',
        2  => '选项 2',
    ])
    ->empty('无选择');

// 对于模型
Select::make('user')
    ->fromModel(User::class, 'name')
    ->empty('无选择');

empty 方法还接受第二个参数，负责值：

Select::make('user')
    ->empty('无选择', 0)
    ->options([
        1  => '选项 1',
        2  => '选项 2',
    ]);

使用 allowAdd 方法允许自定义值：

Select::make('type')
    ->allowAdd()
    ->options([
        '选项 1',
        '选项 2',
    ]);

关系

关系字段可以加载动态数据，如果您需要连接，这是一个很好的解决方案。

use Orchid\Screen\Fields\Relation;

Relation::make('idea')
    ->fromModel(Idea::class, 'name')
    ->title('选择您的想法');

对于多重选择，使用 multiple() 方法。

Relation::make('ideas.')
    ->fromModel(Idea::class, 'name')
    ->multiple()
    ->title('选择您的想法');

注意。 请注意名称末尾的点。它是为了显示数组的预期性。就像它是 HTML 代码 <input name='ideas[]'>

要修改加载，您可以使用对 scope 模型的引用，例如，仅获取活动的：

namespace App;

use Illuminate\Database\Eloquent\Model;

class Idea extends Model
{

    /**
     * @param Builder $query
     *
     * @return Builder
     */
    public function scopeActive(Builder $query)
    {
        return $query->where('active', true);
    }
}

Relation::make('idea')
    ->fromModel(Idea::class, 'name')
    ->applyScope('active')
    ->title('选择您的想法');

您还可以向方法传递额外的参数：

Relation::make('idea')
    ->fromModel(Idea::class, 'name')
    ->applyScope('status', 'active')
    ->title('选择您的想法');

您可以添加一个或多个字段，这些字段将被额外搜索：

Relation::make('idea')
     ->fromModel(Idea::class, 'name')
     ->searchColumns('author', 'description')
     ->title('选择您的想法');

要设置将作为搜索结果列出的项目数量，您可以链接方法 chunk，传递搜索结果的数量作为参数：

Relation::make('users.')
    ->fromModel(User::class, 'name')
    ->chunk(20);

选择选项可以与计算字段一起工作，但仅用于显示结果，搜索将仅在数据库中的一个列上进行。为此，使用 displayAppend 方法。

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    public function getFullAttribute(): string
    {
        return sprintf('%s (%s)', $this->name, $this->email);
    }
}

要指示显示的字段，您必须：

Relation::make('users.')
    ->fromModel(User::class, 'name')
    ->displayAppend('full')
    ->multiple()
    ->title('选择用户');

日期时间

日期时间字段为您的 Laravel 应用程序提供了一个简化的界面，用于选择日期和时间，利用了 flatpickr JavaScript 库的强大功能。

日期时间

要创建日期时间字段，请使用 DateTimer 类：

use Orchid\Screen\Fields\DateTimer;

DateTimer::make('open')
    ->title('开放日期');

直接输入

启用直接输入以允许用户手动输入：

DateTimer::make('open')
    ->title('开放日期')
    ->allowInput();

注意： 启用直接输入也可以使字段成为必填项：

DateTimer::make('open')
    ->title('开放日期')
    ->allowInput()
    ->required();

日期格式

使用 format() 方法自定义日期格式：

DateTimer::make('open')
    ->title('开放日期')
    ->format('Y-m-d');

使用 serverFormat() 方法定义传输值到前端的格式：

DateTimer::make('open')
    ->serverFormat('Y-m-d H:i:s');

选择以 24 小时格式显示时间：

DateTimer::make('open')
    ->title('开放日期')
    ->format24hr();

时间选择

使用 enableTime() 方法启用日期和时间的选择：

DateTimer::make('open')
    ->title('开放时间')
    ->enableTime();

仅选择时间

如果只需要选择时间：

DateTimer::make('open')
    ->title('开放时间')
    ->noCalendar()
    ->format('h:i K'); // 指定时间格式

范围选择

允许用户选择日期和时间的范围：

DateTimer::make('open')
    ->format('Y-m-d H:i')
    ->enableTime()
    ->format24hr()
    ->range();

快速日期选择

通过预定义的快速日期选项简化选择：

DateTimer::make('open')
    ->format('Y-m-d H:i')
    ->enableTime()
    ->format24hr()
    ->range()
    ->withQuickDates([
        '今天'     => now(),
        '昨天' => now()->subDay(),
        '上周' => [now()->startOfDay()->subWeek(), now()->endOfDay()],
    ]);

允许空值

允许字段保持为空：

DateTimer::make('open')
    ->format('Y-m-d')
    ->allowEmpty()
    ->multiple();

多重选择

允许多重日期选择：

DateTimer::make('open')
    ->format('Y-m-d')
    ->allowEmpty()
    ->multiple();

日期范围

允许您选择日期（和时间）的范围。

示例：

use Orchid\Screen\Fields\DateRange;

DateRange::make('open')
    ->title('开放时间之间');

默认值/结果是具有 start 和 end 键的数组。

DateRange::make('open')
    ->title('开放时间之间')
    ->value(['start' => now()->subDays(30), 'end' => now()]),

时区

TimeZone 字段是一个表单元素，允许用户从下拉列表中选择时区。它对于选择事件或操作将发生的时区很有用。

use Orchid\Screen\Fields\TimeZone;

TimeZone::make('time');

这将创建一个包含所有可用时区的下拉列表。您还可以使用 listIdentifiers() 方法指定要包含在列表中的特定时区集：

use DateTimeZone;

TimeZone::make('time')
    ->listIdentifiers(DateTimeZone::ALL);

listIdentifiers() 方法接受 DateTimeZone 类的常量作为参数。默认值是 DateTimeZone::ALL，它包括所有可用时区。其他可能的值是：

DateTimeZone::AFRICA;
DateTimeZone::AMERICA;
DateTimeZone::ANTARCTICA;
DateTimeZone::ARCTIC;
DateTimeZone::ASIA;
DateTimeZone::ATLANTIC;
DateTimeZone::AUSTRALIA;
DateTimeZone::EUROPE;
DateTimeZone::INDIAN;
DateTimeZone::PACIFIC;
DateTimeZone::UTC;
DateTimeZone::ALL_WITH_BC;
DateTimeZone::PER_COUNTRY;

变量区域的表示可以在 PHP 文档中找到。

Quill WYSIWYG 编辑器

Quill WYSIWYG（所见即所得）编辑器为您的 Web 应用程序集成丰富的文本编辑功能提供了无缝的解决方案。使用 Quill，用户可以轻松插入图像、应用文本样式、嵌入视频等。

要创建 Quill 编辑器实例，只需使用 Quill 字段。以下是如何在代码中实现它的示例：

use Orchid\Screen\Fields\Quill;

Quill::make('html');

工具栏控件

Quill 提供了一组全面的控件，分为六组，为用户提供多样的编辑功能。这些组包括：

文本：用于基本文本格式化的工具，如粗体、斜体、下划线和删除线。
颜色：用于调整文本和背景颜色的选项。
标题：用于将文本样式化为标题的工具。
列表：用于创建有序和无序列表的控件。
格式：其他格式选项，如对齐和缩进。
媒体：用于插入多媒体内容的功能，如图像和视频。

您可以通过指定要显示的控件组来自定义工具栏。以下是如何在代码中配置工具栏的示例：

Quill::make('html')
    ->toolbar(["text", "color", "header", "list", "format", "media"]);

可扩展性

Quill 的一个优势是通过插件进行扩展。您可以通过安装额外的插件来增强编辑器的功能。这可以通过 JavaScript 文件轻松实现。

document.addEventListener('orchid:quill', (event) => {
    // 用于注册插件的对象
    event.detail.quill;

    // 初始化的参数对象
    event.detail.options;
});

注意：您可以通过 platform.php 配置文件添加自定义脚本和样式表

quill-image-compress 的示例：

在 config/platform.php 中的 resource.scripts 数组中添加以下内容

"https://unpkg.com/quill-image-compress@1.2.11/dist/quill.imageCompressor.min.js",
"/js/admin/quill.imagecropper.js",

在 public/js/admin 中创建一个 quill.imagecropper.js，内容如下

document.addEventListener('orchid:quill', (event) => {
    // 用于注册插件的对象
    event.detail.quill.register("modules/imageCompressor", imageCompressor);

    // 初始化的参数对象
    event.detail.options.modules = {
         imageCompressor: {
            quality: 0.9,
            maxWidth: 1000, // 默认
            maxHeight: 1000, // 默认
            imageType: 'image/jpeg'
        }
    };
});

Markdown 编辑器

Markdown 编辑器字段是一个强大的工具，用于使用 Markdown 标记语言创建和编辑文本。Markdown 提供了一种简单直观的语法，使用户能够专注于内容创作，而不必被复杂的格式化所困扰。

Markdown Markdown 编辑器预览

要创建 Markdown 编辑器字段，可以使用 SimpleMDE 类：

use Orchid\Screen\Fields\SimpleMDE;

SimpleMDE::make('markdown');

矩阵

矩阵字段提供了一个用户友好的界面，用于编辑表格数据，提供灵活性和便利性。它特别适用于需要在平面表格格式中管理结构化数据的场景，例如将信息存储在 JSON 列类型中。

您可以通过指定列标题轻松创建矩阵字段。以下是定义具有列的矩阵字段的示例：

use Orchid\Screen\Fields\Matrix;

Matrix::make('options')
    ->columns([
        '属性',
        '值',
        '单位',
    ]);

自定义列标题

在某些情况下，列的值可能与需要在标题中显示的内容不同。您可以通过为列指定键来解决此问题：

Matrix::make('options')
    ->columns([
        '属性' => 'attr',
        '值' => 'product_value',
    ]);

限制行数

您还可以设置最大行数，超过此行数后将禁用添加按钮：

Matrix::make('options')
    ->columns(['id', 'name'])
    ->maxRows(10);

自定义字段

默认情况下，矩阵字段中的每个单元格都包含一个文本区域元素。但是，您可以根据需要自定义字段类型：

Matrix::make('users')
    ->title('用户列表')
    ->columns(['id', 'name'])
    ->fields([
        'id'   => Input::make()->type('number'),
        'name' => TextArea::make(),
    ]);

需要注意的是，矩阵字段在客户端执行字段复制。虽然这对于简单的输入和选择字段无缝工作，但对于复杂或复合字段可能会遇到限制。

代码编辑器

一个用于编写程序代码并支持高亮显示的字段。

示例：

use Orchid\Screen\Fields\Code;

Code::make('code');

要为特定编程语言指定代码高亮显示，您可以使用 language() 方法。

Code::make('code')
    ->language(Code::CSS);

可用的语言包括：

标记 – markup、html、xml、svg、mathml
CSS – css
类似 C 的 – clike
JavaScript – javascript、js

支持行号：

Code::make('code')
    ->lineNumbers();

图片

允许您上传图片。

示例：

use Orchid\Screen\Fields\Picture;

Picture::make('picture');

您可以使用 storage 方法指定上传图片的存储后端：

Picture::make('picture')
    ->storage('s3');

使用 acceptedFiles 方法定义字段应接受的文件类型。这是使用唯一的唯一文件类型说明符完成的。

例如，要仅允许 JPEG 图片，您可以使用以下代码：

Picture::make('picture')
    ->acceptedFiles('.jpg');

裁剪器

扩展了 Picture，允许您上传图片并裁剪为所需格式。

裁剪器

示例：

use Orchid\Screen\Fields\Cropper;

Cropper::make('picture');

宽度和高度

为了控制格式，您可以指定所需图片的宽度和高度：

Cropper::make('picture')
    ->width(500)
    ->height(300);

或者您可以使用 minWidth / maxWidth 或 minHeight / maxHeight 或使用方便的方法 minCanvas / maxCanvas 施加特定限制

Cropper::make('picture')
    ->minCanvas(500)
    ->maxWidth(1000)
    ->maxHeight(800);

文件大小限制

要限制下载文件的大小，您必须设置最大值（以 MB 为单位）。

Cropper::make('picture')
    ->maxFileSize(2);

值

返回值的控制通过以下方法进行：

Cropper::make('picture')
    ->targetId();

将返回 Attachment 记录的序列号（id）。

Cropper::make('picture')
    ->targetRelativeUrl();

将返回图片的相对路径。

Cropper::make('picture')
    ->targetUrl();

将返回图片的绝对路径。

附件

Attach 字段提供了一个直观的界面，用于上传图片和文件，包括支持分组和排序。

要创建文件上传元素，请使用 Attach 类的 make 方法并指定字段名称：

use Orchid\Screen\Fields\Attach;

Attach::make('attachments');

要允许多个文件上传，请使用 multiple() 方法：

Attach::make('attachments')
    ->multiple();

文件上传限制

对于多个文件上传，您可以使用 maxCount 方法设置可以上传的最大文件数：

Attach::make('attachments')
    ->multiple()
    ->maxCount(3); // 3 个文件

您还可以使用 maxSize() 方法限制文件大小。大小以兆字节（MB）为单位指定：

Attach::make('attachments')
    ->maxSize(1024); // 以 MB 为单位的大小

最大文件上传大小： 默认情况下，upload_max_filesize 和 post_max_size 的值设置为 2M。您可以在 php.ini 中更改这些设置以允许上传大于 2M 的文件。

使用 accept 方法指定字段应接受的文件类型，例如：

Attach::make('upload')
    ->accept('image/*,application/pdf,.psd');

提供的字符串是一个以逗号分隔的唯一文件类型说明符列表。

文件分组

您可以使用 group 方法按不同类别对文件进行分组。如果您需要上传不同类型的文件（如文档和图片），这特别有用。

Attach::make('docs')
    ->group('documents');

Attach::make('images')
    ->group('photo');

要通过模型关系处理上传的分组文件，请使用以下语法：

use Orchid\Attachment\Models\Attachment;

/**
 * 返回附加的 "hero"（一对一）。
 */
public function hero(): HasOne
{
    return $this->hasOne(Attachment::class, 'id', 'hero')
        ->withDefault();
}

/**
 * 返回文档（多对多）。
 * 上传通过 group() 方法处理。
 */
public function documents(): MorphToMany
{
    return $this->attachments('documents');
}

文件存储

上传字段可以与不同的存储库一起工作。为此，请指定在 config/filesystems.php 中定义的存储库键：

Attach::make('upload')
    ->storage('s3');

默认情况下，使用 public 存储。

显式文件路径配置

如果您需要覆盖标准文件存储规则并显式定义上传路径，请使用 path 方法：

Attach::make('upload')
    ->path('/custom/path');

文件验证和服务器上的排序

验证文件在服务器端非常重要。例如，检查文件是否为具有特定纵横比或文件类型的图像。为此，请使用 uploadUrl 方法指定文件上传的端点：

Attach::make('upload')
    ->uploadUrl(route('my.upload.endpoint'));

同样，您可以为文件排序指定一个端点：

Attach::make('upload')
    ->sortUrl(route('my.sort.endpoint'));

错误处理和消息显示

为了确保用户不会遇到不明确的错误，提供清晰和信息丰富的错误消息非常重要。使用 errorMaxSizeMessage 和 errorTypeMessage 方法指定自定义消息：

Attach::make('upload')
    ->errorMaxSizeMessage("文件大小过大")
    ->errorTypeMessage("无效的文件类型");

组

Group 组件用于将多个字段组合成一行，从而创建更紧凑和有组织的界面。这对于分组相关数据（如名字和姓氏）特别有用。

Group::make([
    Input::make('first_name'),
    Input::make('last_name'),
]),

列宽

默认情况下，当您使用 fullWidth 方法时，字段将占据屏幕的全部可用宽度。此选项适用于大多数需要元素填充整个空间的场景：

Group::make([
    // ...
])->fullWidth();

然而，在某些情况下，您可能希望字段仅占据必要的空间。autoWidth 方法非常适合包含不同数据量的字段。例如，当使用单选按钮时：

Group::make([
    Radio::make('agreement')
        ->placeholder('是')
        ->value(1),

    Radio::make('contact')
        ->placeholder('否')
        ->value(0),
])->autoWidth();

为了更灵活地配置列宽，您可以使用支持 CSS Grid 的 widthColumns() 方法。此方法允许您使用 grid-template-columns 属性的值指定列宽：

Group::make([
    // ...
])->widthColumns('2fr 1fr');

widthColumns() 接受的值包括：

百分比（例如，30%）
像素（例如，120px）
分数单位（例如，2fr）
其他值如 max-content 和 auto

重要： 指定的值数量不得少于组中的元素数量。

宽度设置仅适用于桌面设备。在移动设备上，每个字段将显示在新行上，从而增强界面的响应性并改善用户体验。

列对齐

组内的列可能具有不同的高度，尤其是在只有一个列有标题时。为了创建更具视觉吸引力的界面，使用列对齐非常重要。

当其中一个列有标题时，将所有列对齐到父容器的底部将创建更和谐的外观。为此，使用 alignEnd 方法：

Group::make([
    // ...
])->alignEnd();

如果您希望所有元素在顶部对齐，请应用 alignStart 方法：

Group::make([
    // ...
])->alignStart();

为了确保列沿文本基线对齐，以便一致显示内容，请使用 alignBaseLine 方法：

Group::make([
    // ...
])->alignBaseLine();

为了对称的外观，请使用 alignCenter 方法将列居中：

Group::make([
    // ...
])->alignCenter();

按钮

按钮用于将用户填写的表单提交到服务器。

要创建调用当前屏幕中定义的 handler 方法的按钮，请使用 Button::make()：

Button::make('提交')
    ->method('handler');

方法必须在按钮所在的屏幕中可用。

如果您需要将特定数据传递给方法，请将其指定为第二个参数：

Button::make('提交')
    ->method('handler', [
        'user' => 1,
    ]);

动作确认

为了防止意外操作，添加 confirm() 方法。这将在执行操作之前显示确认对话框。这对于不可逆的操作（如数据删除）特别有用。

Button::make('删除')
    ->method('deleteItem')
    ->confirm('您将失去对此项目的访问。');

提示： 在 confirm() 中使用清晰简洁的消息，以便用户理解后果。

提交 URL

要指定表单数据应发送到的 URL，请使用 action() 方法。通常，这将是您应用程序中控制器的 URL，当按钮被点击后请求将在此处处理。

Button::make('提交')
    ->action('https://orchid.software');

Button::make('提交')
    ->action(route('controller.method'));

文件下载

要在点击按钮时启动文件下载，请使用 download() 方法。这表明系统执行方法的结果将是一个可下载的文件，而不是简单地在浏览器中显示。

Button::make('下载报告')
    ->method('export')
    ->download();

链接

链接（Link）用于将用户引导到另一个页面或执行某个操作，例如下载文件。

要创建指向特定 URL 的链接，请使用 Link::make() 和 href() 方法：

Link::make('访问 Orchid')
    ->href('https://orchid.software');

在新标签页中打开链接

要在新标签页中打开链接，请添加 target('_blank') 方法。这对于外部网站或资源特别有用，您希望它们在当前页面旁边打开。

Link::make('文档')
    ->href('https://orchid.software/docs')
    ->target('_blank');

文件下载

如果链接应启动文件下载，请使用 download() 方法。这会通知浏览器链接指向可下载的文件。

Link::make('下载报告')
    ->href('/path/to/report.pdf')
    ->download();

注意： 确保文件在指定路径上可访问，以避免下载错误。

下拉菜单

Dropdown 组件允许您创建一个带有下拉列表的按钮，方便分组相关操作，例如用于管理项目的三点菜单。

要创建下拉菜单，请在 list() 方法中列出所有操作：

DropDown::make()
    ->icon('bs.options-vertical')
    ->list([
        Link::make('编辑')
            ->route('platform.systems.users.edit', $user->id),

        Button::make('删除')
            ->method('remove')
            ->icon('trash'),
    ]);

数字范围

您可以创建数字范围。这对于过滤器特别有用。

NumberRange::make();

与过滤器一起使用：

TD::make()->filter(NumberRange::make());
//或
TD::make()->filter(TD::FILTER_NUMBER_RANGE);

结果是具有 min 和 max 键的数组。

自定义字段创建

要创建自定义字段，请参考文档中的“构建器”页面。该页面提供了一个简单的指南，指导您如何根据需求创建和自定义字段。点击此处访问“构建器”页面：构建器。

表单元素

探索 更多内容。

探索更多内容。