README

存在一个 Discord 社区。 https://discord.gg/VYau8hgwrm 如需快速帮助，请在适当的频道中提问。

Laravel Blade 组件集合

为您的项目提供可重用的 Laravel Blade 组件

安装

您可以通过 composer 安装此包

composer require dcblogdev/laravel-blade-components

使用方法

表单组件

打开
输入
文本域
复选框
单选按钮
选择框
按钮

所有表单组件都接受诸如 class='' style='' 这样的选项参数

当方法设置为 PUT、PATCH 或 DELETE 时，@method() 将自动应用。

打开

默认为 POST 方法并包含 CSRF 令牌

<x-form.open>

</x-form.open>

可以传递方法和操作

<x-form.open method='delete' action='delete-comment'>

</x-form.open>

表单输入

创建一个带有名称的输入，如果没有提供标签，则名称将用作标签。

<x-form.input name='username'></x-form.input>

输出

<div>
    <label for='username'>Username</label>
    <input type='text' name='username' id='username' value=''>
</div>

使用标签

<x-form.input name='username' label='Username'></x-form.input>

使用 id 和类

<x-form.input name='username' label='Username' id='username' class='form-input'></x-form.input>

默认类型为 text，可以更改

<x-form.input name='password' type='password'></x-form.input>

设置输入值

<x-form.input name='username' label='Username'>{{ $username }}</x-form.input>

表单文本域

<x-form.textarea name='comments'></x-form.textarea>

设置行和列

<x-form.textarea name='comments' cols='10' rows='10'></x-form.textarea>

设置文本域数据

<x-form.textarea name='comments' cols='10' rows='10'>{{ $comments }}</x-form.textarea>

表单复选框

也可以定义复选框，设置名称和值

<x-form.checkbox name='terms' value='1'></x-form.checkbox>

通过传递其值来检查复选框，如果匹配则复选框将被选中。

<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>

或者

<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>

表单单选按钮

也可以定义单选按钮，设置名称、标签和值

<x-form.radio name='result' label='Won' value='Won'></x-form.radio>
<x-form.radio name='result' label='Lost' value='Lost'></x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'></x-form.radio>

传递一个值，将检查匹配的单选按钮。

<x-form.radio name='result' label='Won' value='Won'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Lost' value='Lost'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'>{{ $result }}</x-form.radio>

通过传递其值来检查复选框，如果匹配则复选框将被选中。

<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>

或者

<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>

表单选择框

创建一个选择菜单，设置名称和占位符

<x-form.select name='types' placeholder='Select'>

</x-form.select>

省略占位符以仅显示选择和可选择的选项

<x-form.select name='types'>

</x-form.select>

为了设置选项，需要一个数组，然后对其进行循环，并使用嵌套组件。

传递数组的键和值

@php
$options = [1 => 'one', 2 => 'two', 3 => 'three'];
@endphp

<x-form.select name='types' placeholder='Select'>
    @foreach($options as $key => $value)
        <x-form.selectoption key='{{ $key }}' value='{{ $value }}'></x-form.selectoption>
    @endforeach
</x-form.select>

表单按钮

创建一个按钮，默认为提交类型

<x-form.button name='submit'>Submit</x-form.button>

仅使用默认值和标签创建一个按钮

<x-form.button>Submit</x-form.button>

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件 dave@dcblog.dev 联系，而不是使用问题跟踪器。

致谢

许可

MIT 许可证 (MIT)。请参阅许可文件了解更多信息。

dcblogdev / laravel-blade-components

维护者

详细信息