README

组件

使用LLoadout Components，您将获得最优秀的Laravel前端组件。我们不重新发明轮子，而是将最好的组件组合在一起。

安装

composer require lloadout/components

依赖关系

• Blade Ui Kit
• Apex charts
• Select 2
• 签名板

额外的LLoadout组件

上述某些组件缺少一些功能，这是我们提供的功能。LLoadout提供的组件以'load'为前缀。

加载资产

@lloadoutScripts

选择

@php($options = [1 => 'first', 2 => 'second'])
<x-load-select name="your-name" :options="$options" class="searchable"></x-load-select>

此标记将渲染为

<select name="your-name">
    <option value="1">first</option>
    <option value="2">second</option>
</select>

您可以通过键值对传递任何可迭代的对象。如果您添加一个'class' 'searchable'，则选择字段将变为可搜索的select2字段。

图表

图表组件使用了apexcharts。目前lloadout中仅实现了三种类型的图表。我仅创建了一个基本实现，如果您想为图形添加更多功能，请参考Apex Charts本身。

所有图表都有三个参数

• title：图表的标题
• data：数据数组
• labels：标签数组

条形图有额外的参数

• orientation：可以是'horizontal'或'vertical'

条形图

<x-load-barchart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" orientation='horizontal' :data="[10,20,70]" :labels="['a']"></x-load-barchart>

堆叠条形图

<x-load-barchart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" orientation='horizontal' :data="[[10,20,70],[10,20,70],[10,20,70]]" :labels="['a']"></x-load-barchart>

饼图

<x-load-piechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-piechart>

折线图

<x-load-linechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-linechart>

签名

此签名组件将在您的HTML中创建一个文本字段，在该文本字段中存储一个base64编码的png流。

<x-load-signature name="my-signature" width="400" height="400" background="white" color="black" />