digiti/form-builder

表单构建器包

维护者

详细信息

github.com/digiti/form-builder

源代码

问题

安装: 345

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 3

分支: 0

开放性问题: 0

类型:项目

v2.0.2 2023-11-30 10:55 UTC

Requires

MIT 6304174150bbc7ebcda06646247fa774eb3cb39c

This package is auto-updated.

Last update: 2024-09-30 01:51:35 UTC

README

Latest Version on Packagist Total Downloads

这是一个基于 Livewire V3 的极简表单构建器。主要用于创建具有响应式字段和内容的分步表单。

安装

为了让这个包正常工作，您需要完成 Livewire v3 安装指南。完成之后，您需要将此包包含在您的 composer 文件中。

composer require digiti/form-builder

为了包含基本样式，您需要在项目的主 CSS 文件中添加以下导入。

@import '/vendor/digiti/form-builder/dist/build/assets/main.css';

表单

安装完成后，您可以使用以下便捷命令立即开始创建表单

php artisan make:form YourFormName

这将生成使用现有表单组件所需的基文件结构。

表单需要一个名称。此名称将用于将结果链接到表单。因此，它必须是唯一的。默认情况下，所有结果都将存储为 cookie。

public string $name = 'FormExample';

在这里创建您新表单的整个架构

public function schema(): array
    {
        return [
            ...
        ];
    }

使用提交方法，您可以在表单提交时对您的数据进行任何操作

public function submit(): void
    {
        //OnFormSubmitted::dispatch($this->result);
    }

表单可以显示与表单相关的所有数据的概览/结论。要激活此功能，您必须在您的表单类中提供以下公共变量。

public bool $hasConclusion = true

当提交时，它会触发一个名为 OnFormSubmitted 的事件，可以用于钩子自定义逻辑以保存或发送结果。其他可用事件

  • OnStepCompleted
  • OnChapterCompleted

方法

schema() 在这里以数组的形式定义您的章节和输入。这将自动转换为功能表单。

public function schema()
{
	return [
		Text::make('firstname')
			->type('text'),
		Text::make('lastname')
			->type('text'),
		Text::make('lastname')
			->email()
	];
}

字段类型

在构建表单时，您可以使用这些字段类型类来构建每个输入。

它们可以嵌套在“章节”中，但稍后再详细介绍。

注意： 需要使用 make($string) 方法来构造字段类型对象

字段类型选项

  • ->label(): 输入的标签。如果不提供，我们将使用字段名称创建标签。
  • ->required(): 使字段成为必填项。

文本

首先，您有文本字段类型。

一个例子

use App\Fieldtypes\Text;

Text::make('firstname')->type('text')->required()

方法

type($string) 将文本输入类型更改为 $string 中提供的值

Text::make('firstname')->type("text"),

email() 将文本输入类型更改为电子邮件

验证：电子邮件

Text::make('email')->email(),

integer() 将文本输入类型更改为整数

验证：整数

Text::make('quantity')->integer(),

password() 将文本输入类型更改为密码

验证：密码

Text::make('password_confirmation')->password(),

tel() 将文本输入类型更改为电话

Text::make('phone')->tel(),

url() 将文本输入类型更改为网址

验证：网址

Text::make('website')->url(),

单选按钮

一个例子

use App\Fieldtypes\Radio;

Radio::make('radio')
    ->label('Select one option')
    ->options([
        "yes" => "Yes please",
        "no" => "God no!",
    ])

方法

label 将覆盖名称为给定的标签

Radio::make('radio')->label('Select one option')

options(array()) 构造选择输入的选项。键是存储的值。当您只提供标签时，将显示单选按钮。如果您添加了资产，这将隐藏单选按钮，并仅显示资产

Radio::make('radio')
    ->options([
        "app" => [
            "label" => "App",
            "asset" => "https://media.giphy.com/media/9ohlKnRDAmotG/giphy.gif"
        ],
        "website" => [
            "label" => "Website",
            "asset" => "https://media.giphy.com/media/rGuYfsb6WlKyk/giphy.gif"
        ],
        "webshop" => [
            "label" => "Webshop",
            "asset" => "https://media.giphy.com/media/Lq0h93752f6J9tijrh/giphy.gif"
        ],
    ]),

复选框

一个例子

use App\Fieldtypes\Check;

Check::make('Options')
    ->label('Select multiple options')
    ->options([
        "option-1" => "Option one",
        "option-2" => "Option two",
        "option-3" => "Option three"
    ])

方法

单个复选框 创建 1 个复选框。值是名称。如果需要覆盖名称，请检查 'label' 选项

Check::make('Consent')

label(string) 将覆盖名称为给定的标签

Check::make('Consent')->label('I agree with the terms and conditions')

options(array()) 构造选择输入的选项。键是存储的值。当您只提供标签时，将显示单选按钮。如果您添加了资产，这将隐藏单选按钮，并仅显示资产

Check::make('platform')
    ->options([
        "app" => [
            "label" => "App",
            "asset" => "https://media.giphy.com/media/9ohlKnRDAmotG/giphy.gif"
        ],
        "website" => [
            "label" => "Website",
            "asset" => "https://media.giphy.com/media/rGuYfsb6WlKyk/giphy.gif"
        ],
        "webshop" => [
            "label" => "Webshop",
            "asset" => "https://media.giphy.com/media/Lq0h93752f6J9tijrh/giphy.gif"
        ],
    ]),

范围滑块

一个例子

use App\Fieldtypes\Range;
Range::make('amount')
    ->min(10)
    ->max(200)
    ->step(50)

方法

label(string) 将覆盖名称为给定的标签

Range::make('amount')->label('Slide for the correct amount')

min(integer) 设置滑块的最低值

验证：min:{amount}

Range::make('amount')->min(10)

max(integer) 设置滑块的最高值

验证：max:{amount}

Range::make('amount')->max(200)

step(integer) 设置滑块的步长

Range::make('amount')->step(50)

选择

一个例子

use App\Fieldtypes\Select;

Select::make('role')
    ->options([
        "option-1" => "Option one",
        "option-2" => "Option two",
        "option-3" => "Option three"
    ])
    ->multiple()

方法

options(array()) 构造选择输入的选项。键是存储的值。当您只提供标签时，将显示单选按钮。如果您添加了资产，这将隐藏单选按钮，并仅显示资产

Select::make('platform')
    ->options([
        "app" => [
            "label" => "App",
            "asset" => "https://media.giphy.com/media/9ohlKnRDAmotG/giphy.gif"
        ],
        "website" => [
            "label" => "Website",
            "asset" => "https://media.giphy.com/media/rGuYfsb6WlKyk/giphy.gif"
        ],
        "webshop" => [
            "label" => "Webshop",
            "asset" => "https://media.giphy.com/media/Lq0h93752f6J9tijrh/giphy.gif"
        ]
    ]),

multiple() 此方法允许您选择多个选项

Select::make('Multi select')->options([...])->multiple(),

验证

验证在构建您的表单中起着至关重要的作用。每个字段类型都配备了一套通用可访问的方法，旨在帮助您验证用户输入。

此外，某些特定的字段类型方法会自动结合基本验证规则。我们已在适用的情况下在每个方法中包含了验证规则。

必需()

Text::make('first-name')->required()

rawRule(string, bool) 使用rawRule()，您可以添加自己的验证规则。您定义的所有验证规则都将添加到其他方法中已定义的规则。如果您想覆盖所有自动设置的验证规则，可以将可选的$overwrite属性切换为true

Text::make('email')->email()->rawRule('required|min:4') // email|required|min:4
Text::make('email')->email()->rawRule('required|min:4', true) // required|min:4

您可以使用上述方法添加自己的自定义验证。请查看Laravel文档中的自定义验证规则以创建自己的规则。

布局

步骤

您可以将步骤视为屏幕。一个步骤可以包含多个字段类型，并将它们按步骤显示。

一个例子

Step::make([
    Text::make('first-name')
        ->type('text')
        ->label('First name')
        ->required(),
    Text::make('last-name')
        ->type('text')
        ->label('Last name')
        ->required(),
    Text::make('email')
        ->type('email')
        ->required(),
    Text::make('company')
        ->type('text')
        ->required(),
])

方法

title 为步骤添加标题

Step::make([])->title('Please provide us with your contact details')

description 为步骤添加描述

Step::make([])->desccription('Please provide us with your contact details')

reactive 使步骤具有条件性。函数应返回一个布尔值。这将根据输入隐藏/显示步骤。在示例中，此步骤仅在存在'company'字段且为'Digiti'时才会显示

Step::make([])->reactive(function () {
    return isset($this->result['company']) && $this->result['company'] == 'Digiti' ? true : false;
})

章节

章节包含多个步骤，并可具有条件性

一个例子

Chapter::make([
    Step::make([
        Text::make('first-name')
            ->type('text')
            ->label('First name')
            ->required(),
    ]),
    Step::make([
        Text::make('last-name')
            ->type('text')
            ->label('Last name')
            ->required(),
    ])
])

方法

title 为步骤添加标题

Chapter::make([])->title('Please provide us with your contact details')

description 为步骤添加描述

Chapter::make([])->desccription('Please provide us with your contact details')

reactive 使步骤具有条件性。函数应返回一个布尔值。这将根据输入隐藏/显示步骤。在示例中，此步骤仅在存在'company'字段且为'Digiti'时才会显示

在示例中，此步骤仅在存在'company'字段且为'Digiti'时才会显示

Chapter::make([])->reactive(function () {
    return isset($this->result['company']) && $this->result['company'] == 'Digiti' ? true : false;
})

conclusion 章节可以显示与该章节相关的所有数据的概述。

行

行用于包装列。其行为与Bootstrap相同。行在HTML中不是动态的。您可以覆盖默认类以覆盖默认样式

Row::make([
Column::make([
// Coulmn stuff
])
Column::make([
// other Coulmn stuff
])
])

classes() 此方法允许您覆盖类。

Row::make([])->classes('custom-class')

列

列需要一个行作为父元素。其行为与Bootstrap相同。

Row::make([
    Column::make([
        // Column stuff
    ]),
    Column::make([
        // other Column stuff
    ])
])

classes() 此方法允许您覆盖类。

Column::make([])->classes('custom-class')

标题

允许您创建HTML标题。使用level函数选择标题类型

Heading::make('This is a title')->level(1)
// This example will result in:
// <h1>This is a title</h1>

classes() 此方法允许您覆盖类。

Heading::make('Heading')->classes('custom-class')

段落

Paragraph::make('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec semper quam. Maecenas ut orci dapibus, sodales quam quis, tincidunt nunc. Sed ultricies dui turpis, id finibus eros tincidunt ac.')

// This example will result in:

// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec semper quam. Maecenas ut orci dapibus, sodales quam quis, tincidunt nunc. Sed ultricies dui turpis, id finibus eros tincidunt ac.</p>

classes() 此方法允许您覆盖类。

Paragraph::make('paragraph')->classes('custom-class')

锚点

Anchor::make('http://www.google.com')->label('Google it')
// This example will result in:
// <a href="http://www.google.com">Google it</a>

classes() 此方法允许您覆盖类。

Anchor::make('http://www.google.com')->classes('custom-class')

target() 此方法允许您设置链接的目标。

Anchor::make('http://www.google.com')->target('_blank')

rel() 此方法允许您设置链接资源与当前文档之间的关系。

Anchor::make('http://www.google.com')->target('_blank')->rel('noopener noreferrer')

HTML

Html::make('<div class="bg-primary"><h1>Test title</h1></div>')

图片

Image::make('/assets/color-icon-automation-dark.svg')

classes() 此方法允许您覆盖类。

Image::make('/assets/color-icon-automation-dark.svg')->classes('custom-class')