diviky/laravel-components

Blade 组件。

维护者

详细信息

github.com/diviky/laravel-components

源代码

问题

安装次数: 2,657

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 1

开放问题: 0

语言:Blade

v2.0.0 2024-09-09 09:42 UTC

Requires

Requires (Dev)

MIT 57eca701a60269612f11335c5e5c9b175d349c0c

This package is auto-updated.

Last update: 2024-09-14 16:54:45 UTC

README

使用方法

计数器

<x-theme-counter number="10" />

将输出为

<span class="counter"> 10 </span>

开关

<x-form-switch label="Test" name="status" value="1" default="1" />

将输出为

<div class="form-group">
    <label class="custom-switch">
        <input class="custom-switch-input" type="checkbox" value="status" name="status" />

        <span class="custom-switch-indicator"></span>
        <span class="custom-switch-description text-upper">Test</span>
    </label>
</div>
<x-form-switch label="Test" name="status" title="Form group label" value="1" default="1" />

将输出为

<div class="form-group">
    <label class="form-label">Form group label</label>
    <label class="custom-switch">
        <input class="custom-switch-input" type="checkbox" value="status" name="status" />

        <span class="custom-switch-indicator"></span>
        <span class="custom-switch-description text-upper">Test</span>
    </label>
</div>

复选框

<x-theme-checkbox span="Name" name="segment" value="id" />

将输出为

<label class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" name="segment" value="id" />
    <span class="custom-control-label"> Name </span>
</label>

选择组

<x-form-group label="Mail Type">
    <x-form-select-group>
        <x-form-select-item label="From" name="type" value="from" checked />
        <x-form-select-item label="Reply To" name="type" value="reply" />
    </x-form-select-group>
</x-form-group>
将输出为
<div class="form-group">
    <label> Mail Type </label>
    <div class="selectgroup">
        <label class="selectgroup-item">
            <input type="radio" class="selectgroup-input" value="from" name="type" checked />
            <span class="selectgroup-button"> From </span>
            <input type="radio" class="selectgroup-input" value="reply" name="type" />
            <span class="selectgroup-button"> Reply To </span>
        </label>
    </div>
</div>

模态框

<x-theme-modal title="Preview" name="preview">
    <iframe class="absolute" width="100%" height="100%" data-html-preview-target></iframe>
</x-theme-modal>
将输出为
<div class="modal modal-box" data-modal="preview" id="preview" data-modal-backdrop>
    <div class="modal-dialog animated bounceInRight">
        <div class="modal-content">
            <div class="modal-wrapper">
                <button type="button" class="close modal-close" data-dismiss="modal"></button>
                <div class="modal-body">
                    <header class="modal-header">
                        <span class="modal-title"> Preview </span>
                    </header>
                    <div class="modal-content scrollbar">
                        <iframe class="absolute" width="100%" height="100%" data-html-preview-target></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

按钮

<x-form-button />
将输出为
<button type="submit" class="btn btn-primary">Submit</button>
我们还可以使用标签
<x-form-button label="Update" />
将输出为
<button type="submit" class="btn btn-primary">Update</button>

但如果你想在按钮中显示一些文本或图标而不是提交，可以使用它作为 $slot

示例
<x-form-button> Update </x-form-button>
将输出为
<button type="submit" class="btn btn-primary">Update</button>
对于具有 btn-secondary 的按钮，我们可以使用
<x-form-button-secondary />
将输出为
<button type="button" class="btn btn-secondary">Submit</button>
我们还可以为 btn-secondary 使用标签
<x-form-button-secondary label="Submit This" />
将输出为
<button type="button" class="btn btn-secondary">Submit This</button>
对于具有 btn-cancel 的按钮，我们可以使用
<x-form-button-cancel />
将输出为
<button type="button" class="btn btn-cancel" data-modal-dismiss>Cancel</button>
我们还可以为 btn-cancel 使用标签
<x-form-button-cancel label="Cancel This" />
将输出为
<button type="button" class="btn btn-cancel">Cancel This</button>
主题复选框
<x-theme-checkbox label="Select All" name="box" data-segments-all />

<label class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" name="box" class="custom-control-input" data-segments-all />
    <span class="custom-control-label">Select All</span>
</label>

日期过滤器

<x-filter-dates />

<div class="selectgroup">
    <label class="selectgroup-item">
        <input type="radio" name="time" value="" date-value="" data-dateranges-stats="" class="selectgroup-input" />
        <span date-html="" class="selectgroup-button">custom</span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="1h"
            name="time"
            id="auto_id_time_1h"
        />
        <span class="selectgroup-button">1h </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="3h"
            name="time"
            id="auto_id_time_3h"
        />
        <span class="selectgroup-button">3h </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="6h"
            name="time"
            id="auto_id_time_6h"
        />
        <span class="selectgroup-button">6h </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="12h"
            name="time"
            id="auto_id_time_12h"
        />
        <span class="selectgroup-button">12h </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="1d"
            name="time"
            id="auto_id_time_1d"
            checked="checked"
        />
        <span class="selectgroup-button">1d </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="1w"
            name="time"
            id="auto_id_time_1w"
        />
        <span class="selectgroup-button">1w </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="1m"
            name="time"
            id="auto_id_time_1m"
        />
        <span class="selectgroup-button">1m </span>
    </label>
    <label class="selectgroup-item">
        <input
            type="radio"
            class="selectgroup-input"
            data-chart-time="data-chart-time"
            value="3m"
            name="time"
            id="auto_id_time_3m"
        />
        <span class="selectgroup-button">3m </span>
    </label>
</div>

Filepond/文件

<x-form-file name="file" label="Please upload file" data-upload-prefix="package" />

<x-form-file name="file" label="Please upload file" data-upload-prefix="package">
    @slot('help)
        <span>Allow only jpg, png files</span>
    @endslot
</x-form-file>

拖放区域

<x-form-dropzone name="file" label="Please upload file" />

链接

<x-link href="/post">Submit</link>
将输出为
<a href="/link">Submit</a>

日期选择器

<x-form-date />

日期范围选择器

<x-form-date-range />

测试

composer test

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

贡献

请参阅贡献指南以获取详细信息。

许可

MIT 许可证 (MIT)。请参阅许可文件以获取更多信息。